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 代碼，從而更好地處理條件判斷和異步流程。
