JS中用Promise玩转条件判断，这个小技巧你必须知道！

掌握JavaScript中Promise处理条件判断的技巧，让异步流程更清晰！本文深入探讨如何在JS中利用Promise进行高效的条件判断，核心在于将条件判断结果转化为Promise状态。文章将介绍五种实用方法，包括基于`Promise.resolve()`和`Promise.reject()`的二元判断、利用Promise链处理多条件、使用`async/await`简化代码、`Promise.all()`和`Promise.race()`处理并发条件，以及封装独立函数提高代码可读性。同时，针对复杂的嵌套条件，提供链式结构、封装Promise函数、`async/await`结合`try/catch`等解决方案。更重要的是，本文还总结了使用Promise时常见的陷阱，助你构建更健壮的异步逻辑。

Promise处理条件判断的核心在于将条件结果映射为Promise状态，从而实现清晰的异步流程控制。1. 基本方法使用Promise.resolve()和Promise.reject()进行二元判断；2. 多条件可通过链式调用在每个.then()中处理不同分支；3. async/await简化同步风格代码，提升可读性；4. Promise.all()和Promise.race()用于并发条件判断；5. 封装独立函数增强可维护性。对于嵌套条件，可采用链式结构、封装Promise函数、async/await结合try/catch或状态机模式应对复杂逻辑。使用时需注意陷阱：务必处理rejected状态、避免在.then()中随意抛错、不滥用同步代码包装、明确区分Promise.all()与race()、始终返回Promise以维持链式调用。掌握这些技巧可构建更健壮的异步逻辑。

Promise处理条件判断，本质上就是将条件判断的结果作为Promise的状态来处理，让异步流程更清晰。

解决方案

在JavaScript中，Promise 主要用于处理异步操作，但巧妙地结合条件判断，可以构建更灵活和可控的异步流程。核心思路是将条件判断的结果转换为 Promise 的状态（resolve 或 reject），从而利用 Promise 的链式调用来处理不同的分支。

以下是一些常用的方法：

1. 基于 Promise.resolve() 和 Promise.reject() 的基本条件判断：

这种方法适用于简单的二元条件判断。

function conditionalPromise(condition, value) {
  return new Promise((resolve, reject) => {
    if (condition) {
      resolve(value);
    } else {
      reject(new Error("Condition not met"));
    }
  });
}

conditionalPromise(true, "Success!")
  .then(result => console.log(result)) // 输出 "Success!"
  .catch(error => console.error(error));

conditionalPromise(false, "Success!")
  .then(result => console.log(result))
  .catch(error => console.error(error)); // 输出 "Error: Condition not met"

2. 利用 Promise 链进行多条件判断：

当需要处理多个条件时，可以利用 Promise 的链式调用，在每个 .then() 或 .catch() 中进行判断。

function checkConditions(value) {
  return Promise.resolve(value)
    .then(val => {
      if (val > 10) {
        console.log("Value is greater than 10");
        return val * 2;
      } else {
        console.log("Value is less than or equal to 10");
        return val + 5;
      }
    })
    .then(val => {
      if (val % 2 === 0) {
        console.log("Value is even");
        return "Even value: " + val;
      } else {
        console.log("Value is odd");
        return "Odd value: " + val;
      }
    });
}

checkConditions(5)
  .then(result => console.log(result)); // 输出 "Value is less than or equal to 10"，"Value is even"，"Even value: 10"

checkConditions(15)
  .then(result => console.log(result)); // 输出 "Value is greater than 10"，"Value is even"，"Even value: 30"

3. 使用 async/await 简化条件判断：

async/await 可以使异步代码看起来更像同步代码，从而简化条件判断的逻辑。

async function processValue(value) {
  try {
    if (value > 10) {
      console.log("Value is greater than 10");
      return value * 2;
    } else {
      console.log("Value is less than or equal to 10");
      return value + 5;
    }
  } catch (error) {
    console.error("An error occurred:", error);
    throw error; // 重新抛出错误，以便上层处理
  }
}

async function main() {
  const result1 = await processValue(5);
  console.log("Result 1:", result1);

  const result2 = await processValue(15);
  console.log("Result 2:", result2);
}

main();

4. 利用 Promise.all() 和 Promise.race() 处理并发条件判断：

如果需要同时检查多个条件，可以使用 Promise.all() 或 Promise.race()。

• Promise.all()：等待所有条件都满足。
• Promise.race()：只要有一个条件满足就返回。

function checkCondition1() {
  return new Promise(resolve => setTimeout(() => resolve(true), 500));
}

function checkCondition2() {
  return new Promise(resolve => setTimeout(() => resolve(false), 300));
}

Promise.all([checkCondition1(), checkCondition2()])
  .then(results => {
    console.log("All conditions met:", results.every(result => result === true)); // 输出 "All conditions met: false"
  })
  .catch(error => console.error("Error:", error));

Promise.race([checkCondition1(), checkCondition2()])
  .then(result => {
    console.log("First condition met:", result); // 输出 "First condition met: false" (因为 checkCondition2 更快)
  })
  .catch(error => console.error("Error:", error));

5. 封装条件判断函数，提高代码可读性：

将复杂的条件判断逻辑封装成独立的函数，可以提高代码的可读性和可维护性。

function isEligible(age, hasLicense) {
  return new Promise((resolve, reject) => {
    if (age >= 18 && hasLicense) {
      resolve("Eligible");
    } else {
      reject("Not eligible");
    }
  });
}

isEligible(20, true)
  .then(result => console.log(result)) // 输出 "Eligible"
  .catch(error => console.log(error));

isEligible(16, false)
  .then(result => console.log(result))
  .catch(error => console.log(error)); // 输出 "Not eligible"

掌握这些方法，可以更加灵活地在 JavaScript 中使用 Promise 处理条件判断，从而构建更健壮和可维护的异步代码。记住，选择哪种方法取决于你的具体需求和代码复杂度。

Promise 如何处理复杂的嵌套条件判断？

处理复杂的嵌套条件判断时，Promise 依然可以发挥作用，但需要更精细的设计和组织。核心思想是将每个条件判断的结果都转换为 Promise 的状态，并利用 Promise 的链式调用来管理不同的执行路径。

1. 使用多个 .then() 和 .catch() 形成链式结构：

这种方法适用于条件嵌套层数不多的情况。每个 .then() 处理一个条件，如果条件满足，则继续执行下一个 .then()；如果条件不满足，则抛出一个错误，由 .catch() 捕获并处理。

function nestedConditions(value) {
  return Promise.resolve(value)
    .then(val => {
      if (val > 5) {
        console.log("Value is greater than 5");
        return val * 2;
      } else {
        throw new Error("Value is not greater than 5");
      }
    })
    .then(val => {
      if (val % 2 === 0) {
        console.log("Value is even");
        return "Even value: " + val;
      } else {
        throw new Error("Value is odd");
      }
    })
    .catch(error => {
      console.error("Error:", error.message);
      return "Error occurred"; // 返回一个默认值，避免链式调用中断
    });
}

nestedConditions(7)
  .then(result => console.log(result)); // 输出 "Value is greater than 5"，"Value is even"，"Even value: 14"

nestedConditions(3)
  .then(result => console.log(result)); // 输出 "Error: Value is not greater than 5"，"Error occurred"

2. 将嵌套的条件判断封装成独立的 Promise 函数：

这种方法可以提高代码的可读性和可维护性，尤其是在条件嵌套层数较多时。每个 Promise 函数处理一个独立的条件判断逻辑，并返回一个 Promise 对象。

function checkValueGreaterThan5(value) {
  return new Promise((resolve, reject) => {
    if (value > 5) {
      console.log("Value is greater than 5");
      resolve(value * 2);
    } else {
      reject(new Error("Value is not greater than 5"));
    }
  });
}

function checkValueIsEven(value) {
  return new Promise((resolve, reject) => {
    if (value % 2 === 0) {
      console.log("Value is even");
      resolve("Even value: " + value);
    } else {
      reject(new Error("Value is odd"));
    }
  });
}

function handleNestedConditions(value) {
  return checkValueGreaterThan5(value)
    .then(checkValueIsEven)
    .catch(error => {
      console.error("Error:", error.message);
      return "Error occurred";
    });
}

handleNestedConditions(7)
  .then(result => console.log(result)); // 输出 "Value is greater than 5"，"Value is even"，"Even value: 14"

handleNestedConditions(3)
  .then(result => console.log(result)); // 输出 "Error: Value is not greater than 5"，"Error occurred"

3. 使用 async/await 和 try/catch 结构：

async/await 结合 try/catch 可以使代码看起来更像同步代码，从而简化复杂的嵌套条件判断逻辑。

async function handleNestedConditionsAsync(value) {
  try {
    if (value > 5) {
      console.log("Value is greater than 5");
      const doubledValue = value * 2;
      if (doubledValue % 2 === 0) {
        console.log("Value is even");
        return "Even value: " + doubledValue;
      } else {
        throw new Error("Value is odd");
      }
    } else {
      throw new Error("Value is not greater than 5");
    }
  } catch (error) {
    console.error("Error:", error.message);
    return "Error occurred";
  }
}

async function main() {
  const result1 = await handleNestedConditionsAsync(7);
  console.log(result1); // 输出 "Value is greater than 5"，"Value is even"，"Even value: 14"

  const result2 = await handleNestedConditionsAsync(3);
  console.log(result2); // 输出 "Error: Value is not greater than 5"，"Error occurred"
}

main();

4. 状态机模式：

对于极其复杂的条件判断，可以考虑使用状态机模式。状态机将不同的条件和状态转换定义成一个状态图，然后根据当前状态和输入条件，执行相应的操作并转换到下一个状态。 虽然实现较为复杂，但可以有效管理复杂的状态转换。

选择哪种方法取决于嵌套的复杂程度和个人偏好。通常来说，对于简单的嵌套，链式 .then() 和 .catch() 足够使用。对于中等复杂度的嵌套，封装成独立的 Promise 函数可以提高可读性。对于非常复杂的嵌套，async/await 结合 try/catch 或者状态机模式可能更合适。

Promise 在处理条件判断时有哪些潜在的陷阱需要注意？

在使用 Promise 处理条件判断时，有一些潜在的陷阱需要特别注意，以避免出现意外的行为或错误。

1. 忘记处理 rejected 状态：

这是最常见的错误之一。如果 Promise 被 rejected，但没有相应的 .catch() 处理，可能会导致 unhandled promise rejection 错误，甚至程序崩溃。务必确保每个 Promise 链都有一个 .catch() 来处理错误。

function riskyOperation(value) {
  return new Promise((resolve, reject) => {
    if (value > 0) {
      resolve("Operation successful");
    } else {
      reject(new Error("Value must be positive"));
    }
  });
}

riskyOperation(-1)
  .then(result => console.log(result))
  // 缺少 .catch()，会导致 unhandled rejection 错误

2. 在 .then() 中抛出错误：

如果在 .then() 中抛出错误，会导致 Promise 链中断。需要确保在 .then() 中正确处理错误，或者将错误传递给下一个 .catch()。

function processValue(value) {
  return Promise.resolve(value)
    .then(val => {
      if (val > 10) {
        throw new Error("Value is too large"); // 抛出错误
      }
      return val * 2;
    })
    .then(result => console.log("Result:", result))
    .catch(error => console.error("Error:", error.message)); // 捕获错误
}

processValue(15); // 输出 "Error: Value is too large"

3. 滥用 Promise 包装同步代码：

过度使用 Promise 包装同步代码可能会导致代码冗余和性能下降。只有在处理真正的异步操作时才应该使用 Promise。

function add(a, b) {
  // 没必要用 Promise 包装同步代码
  return new Promise(resolve => {
    resolve(a + b);
  });
}

add(1, 2)
  .then(result => console.log(result));

4. 忽略 Promise 的状态：

Promise 有三种状态：pending、resolved 和 rejected。在编写条件判断逻辑时，需要充分考虑 Promise 的状态，并根据不同的状态执行相应的操作。

function fetchData() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      // 模拟异步操作
      const success = Math.random() > 0.5;
      if (success) {
        resolve("Data fetched successfully");
      } else {
        reject("Failed to fetch data");
      }
    }, 1000);
  });

  console.log("Promise state:", promise); // 初始状态是 pending

  promise
    .then(data => {
      console.log("Promise resolved:", data);
    })
    .catch(error => {
      console.error("Promise rejected:", error);
    });
}

fetchData();

5. 混淆 Promise.all() 和 Promise.race()：

Promise.all() 等待所有 Promise 都 resolved，而 Promise.race() 只要有一个 Promise resolved 或 rejected 就返回。混淆这两个方法会导致逻辑错误。

function delay(time, value) {
  return new Promise(resolve => setTimeout(() => resolve(value), time));
}

Promise.all([delay(100, "A"), delay(200, "B")])
  .then(results => console.log("All resolved:", results)); // 等待 200ms，输出 "All resolved: [ 'A', 'B' ]"

Promise.race([delay(100, "A"), delay(200, "B")])
  .then(result => console.log("First to resolve:", result)); // 等待 100ms，输出 "First to resolve: A"

6. 忘记返回 Promise：

在 .then() 或 .catch() 中，如果需要继续链式调用，务必返回一个新的 Promise。否则，后续的 .then() 或 .catch() 将不会执行。

function processValue(value) {
  return Promise.resolve(value)
    .then(val => {
      if (val > 10) {
        console.log("Value is greater than 10");
        // 忘记返回 Promise
      } else {
        console.log("Value is less than or equal to 10");
        return Promise.resolve(val + 5);
      }
    })
    .then(result => console.log("Result:", result)); // 只有 value <= 10 时才会执行
}

processValue(5);  // 输出 "Value is less than or equal to 10"，"Result: 10"
processValue(15); // 只输出 "Value is greater than 10"，后续的 .then() 不会执行

避免这些陷阱，可以编写更健壮、更可靠的 Promise 代码，从而更好地处理条件判断和异步流程。

好了，本文到此结束，带大家了解了《JS中用Promise玩转条件判断，这个小技巧你必须知道！》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！