JavaScript 是一種多功能程式語言，主要用於 Web 開發。 JavaScript 最強大的功能之一是它處理非同步操作的能力。這就是 Promise 發揮作用的地方，它允許開發人員更有效地管理非同步程式碼。本指南將帶您了解 Promise 的基礎知識，提供深入的知識和實際範例，幫助您有效地理解和利用它們。
| 標題 | 副主題 |
|---|---|
| JavaScript 中的 Promise 是什麼？ | 定義、Promise 狀態、基本語法 |
| 創造承諾 | 範例、解決、拒絕 |
| 連鎖承諾 | then()、catch()、finally() |
| 處理錯誤 | 常見陷阱、錯誤處理技術 |
| Promise.all() | 用法、範例、處理多個 Promise |
| Promise.race() | 用法、範例、第一個解決的承諾 |
| Promise.any() | 用法、範例、第一個履行的承諾 |
| Promise.allSettled() | 用法、範例、當所有承諾都解決時 |
| 異步/等待 | 語法、與 Promise 的結合、範例 |
| 現實世界的例子 | Fetch API，非同步檔案讀取 |
| 常見錯誤 | 反模式，最佳實踐 |
| 高級 Promise 概念 | 自訂 Promise、Promise 組合器 |
| 常見問題 | 回答常見問題 |
| 結論 | 總結，最後的想法 |
Une promesse en JavaScript est un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone. Il vous permet d'associer des gestionnaires à la valeur de réussite éventuelle ou à la raison de l'échec d'une action asynchrone. Cela permet aux méthodes asynchrones de renvoyer des valeurs comme les méthodes synchrones : au lieu de renvoyer immédiatement la valeur finale, la méthode asynchrone renvoie une promesse de fournir la valeur à un moment donné dans le futur.
Une promesse peut être dans l'un des trois états suivants :
let promise = new Promise(function(resolve, reject) {
// Asynchronous operation
let success = true;
if(success) {
resolve("Operation successful!");
} else {
reject("Operation failed!");
}
});
Créer une promesse implique d'instancier un nouvel objet Promise et de lui transmettre une fonction. Cette fonction prend deux paramètres : résoudre et rejeter.
let myPromise = new Promise((resolve, reject) => {
let condition = true;
if(condition) {
resolve("Promise resolved successfully!");
} else {
reject("Promise rejected.");
}
});
myPromise.then((message) => {
console.log(message);
}).catch((message) => {
console.log(message);
});
Dans cet exemple, myPromise sera résolue avec succès et enregistrera « Promesse résolue avec succès ! » à la console.
L'une des caractéristiques puissantes des promesses est la possibilité de les enchaîner. Cela vous permet d'effectuer une séquence d'opérations asynchrones de manière lisible et maintenable.
La méthode then() est utilisée pour gérer la réalisation d'une promesse.
myPromise.then((message) => {
console.log(message);
return "Next step";
}).then((nextMessage) => {
console.log(nextMessage);
});
La méthode catch() est utilisée pour gérer le rejet d'une promesse.
myPromise.then((message) => {
console.log(message);
}).catch((error) => {
console.log(error);
});
La méthode enfin() est utilisée pour exécuter du code, que la promesse ait été remplie ou rejetée.
myPromise.finally(() => {
console.log("Promise is settled (either fulfilled or rejected).");
});
La gestion des erreurs dans les promesses est cruciale pour un code robuste.
myPromise.then((message) => {
console.log(message);
throw new Error("Something went wrong!");
}).catch((error) => {
console.error(error.message);
});
Promise.all() prend un tableau de promesses et renvoie une seule promesse qui se résout lorsque toutes les promesses du tableau sont résolues, ou qui est rejetée si l'une des promesses est rejetée.
let promise1 = Promise.resolve(3);
let promise2 = 42;
let promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
console.log(values); // [3, 42, "foo"]
});
Promise.race() renvoie une promesse qui se résout ou se rejette dès que l'une des promesses du tableau est résolue ou rejetée.
let promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'one');
});
let promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'two');
});
Promise.race([promise1, promise2]).then((value) => {
console.log(value); // "two"
});
Promise.any() renvoie une promesse qui se résout dès que l'une des promesses du tableau se réalise, ou la rejette si toutes les promesses sont rejetées.
let promise1 = Promise.reject("Error 1");
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success"));
let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success"));
Promise.any([promise1, promise2, promise3]).then((value) => {
console.log(value); // "Success"
}).catch((error) => {
console.log(error);
});
Promise.allSettled() renvoie une promesse qui se résout une fois que toutes les promesses données ont été résolues ou rejetées, avec un tableau d'objets décrivant chacun le résultat de chaque promesse.
let promise1 = Promise.resolve("Resolved");
let promise2 = Promise.reject("Rejected");
Promise.allSettled([promise1, promise2]).then((results) => {
results.forEach((result) => console.log(result.status));
});
Les mots-clés async et wait vous permettent de travailler avec les promesses de manière plus synchrone.
async function myFunction() {
let myPromise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Done!"), 1000);
});
let result = await myPromise; // Wait until the promise resolves
console.log(result); // "Done!"
}
myFunction();
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching data: ", error);
}
}
fetchData();
L'API Fetch est un cas d'utilisation courant pour les promesses.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Utilisation des promesses de lecture de fichiers dans Node.js.
const fs = require('fs').promises;
async function readFile() {
try {
let content = await fs.readFile('example.txt', 'utf-8');
console.log(content);
} catch (error) {
console.error('Error reading file:', error);
}
}
readFile();
Vous pouvez créer des promesses personnalisées pour gérer des opérations asynchrones spécifiques.
function customPromiseOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Custom operation complete!");
}, 2000);
});
}
customPromiseOperation().then((message) => {
console.log(message);
});
Combinez plusieurs promesses à l'aide de combinateurs comme Promise.all(), Promise.race(), etc., pour gérer des flux asynchrones complexes.
Comment les promesses aident-elles avec la programmation asynchrone ?
Les promesses offrent un moyen plus propre et plus lisible de gérer les opérations asynchrones par rapport aux rappels traditionnels, réduisant ainsi le risque de « l'enfer des rappels ».
Quelle est la différence entre then() et `
attraper()?
then() est utilisé pour gérer les promesses résolues, tandis que catch()` est utilisé pour gérer les promesses rejetées.
你可以在較舊的 JavaScript 程式碼中使用 Promise 嗎？
是的，Promise 可以與較舊的 JavaScript 程式碼一起使用，但為了完全相容，您可能需要使用 polyfill。
使用 Promise.all() 有什麼好處？
Promise.all() 讓您可以並行執行多個 Promise 並等待所有這些 Promise 完成，從而更輕鬆地管理多個非同步操作。
async/await 如何改進 Promise 處理？
async/await 語法使非同步程式碼看起來和行為更像同步程式碼，提高了可讀性和可維護性。
如果承諾既沒有得到解決也沒有被拒絕會發生什麼？
如果一個 Promise 既沒有被解決也沒有被拒絕，它就會無限期地保持在待處理狀態。重要的是要確保所有承諾最終得到解決或拒絕，以避免潛在的問題。
Promise 是現代 JavaScript 的基本組成部分，使開發人員能夠更有效率、更易讀地處理非同步操作。透過掌握 Promise，您可以編寫更清晰、更易於維護的程式碼，從而有效地處理非同步程式設計的複雜性。無論您是從 API 獲取資料、讀取檔案還是執行自訂非同步任務，理解 Promise 對於任何 JavaScript 開發人員來說都是至關重要的。
以上是JavaScript 中的 Promise：初學者終極指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
