ES6中Promise的使用方法实例总结

ES6（ECMAScript 2015）中引入了Promise，这是一种处理异步编程的现代解决方案。Promise代表了一个异步操作的最终完成（或失败）及其结果值。 ### Promise基本概念 Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。Promise一旦改变状态，就不会再变。 - **pending**：初始状态，既不是成功，也不是失败状态。 - **fulfilled**：意味着操作成功完成。 - **rejected**：意味着操作失败。 创建Promise对象的方法是实例化一个Promise对象，即： ```javascript let promise = new Promise(function(resolve, reject) { // 异步操作代码 if (/* 异步操作成功 */) { resolve(value); } else { reject(error); } }); ``` 这里的`resolve`和`reject`是函数，它们分别将Promise对象的状态从“pending”变为“fulfilled”和“rejected”。 ### Promise的常用方法 Promise主要拥有以下几种常用方法： #### then() `then()`方法用于添加异步操作完成后的回调函数，它可以接收两个参数，第一个是成功时的回调函数，第二个是失败时的回调函数。 ```javascript promise.then(function(value) { // success }, function(error) { // failure }); ``` then()方法返回的是一个新的Promise实例，因此可以链式调用多个then()方法。 #### catch() `catch()`方法用于添加异步操作失败后的回调函数。 ```javascript promise.catch(function(error) { // failure }); ``` catch()实际上是then(null, rejection)的别名。 #### finally() `finally()`方法用于指定无论Promise对象最后状态如何，都会执行的操作，可以用来清理资源或者进行一些必要的操作。 ```javascript promise.finally(function() { // code that runs regardless of whether the promise was resolved or rejected }); ``` ### Promise使用实例 #### 基本使用 ```javascript let promise = new Promise(function(resolve, reject) { // 异步操作，例如从服务器获取数据 setTimeout(() => { let data = '数据'; resolve(data); // 操作成功，调用resolve() }, 1000); }); promise.then( value => console.log(value), // 数据接收 reason => console.log(reason) // 错误处理 ); ``` #### 链式调用 ```javascript let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(1), 1000); }); promise.then( value => { console.log(value); // 输出 1 return value + 2; } ).then( value => { console.log(value); // 输出 3 return value + 4; } ).then( value => { console.log(value); // 输出 7 } ); ``` #### 链式错误处理 ```javascript promise .then(f1) .catch(f2) .then(f3); ``` 如果f1或者任何then()链中的函数抛出一个错误，f2就会被调用。如果f2抛出一个错误，f3就会被调用。 #### Promise.all() 如果希望多个Promise对象同时完成，可以使用`Promise.all()`方法。 ```javascript let promise1 = Promise.resolve(3); let promise2 = 42; let promise3 = new Promise(function(resolve, reject) { setTimeout(resolve, 1000, 'foo'); }); Promise.all([promise1, promise2, promise3]).then(function(values) { console.log(values); // [3, 42, "foo"] }); ``` `Promise.all()`接收一个Promise对象的数组作为参数，当所有的Promise对象都成功时，才会执行then()方法。 #### Promise.race() `Promise.race()`方法和`Promise.all()`类似，不同之处在于`Promise.race()`只要求其中一个Promise对象完成，就会立即执行then()方法。 ```javascript let promise1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, 'one'); }); let promise2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then(function(value) { console.log(value); // 输出 "two"，因为promise2更快完成 }); ``` ### 解决回调地狱 Promise解决回调地狱的一个方式是使用链式调用。通过这种方式，可以将嵌套的回调扁平化，每个then()方法只关心它需要处理的内容，从而使代码更加清晰和易于管理。 ```javascript doSomething(function(result) { doSomethingElse(result, function(newResult) { doThirdThing(newResult, function(finalResult) { console.log('Got the final result: ' + finalResult); }, failureCallback); }, failureCallback); }, failureCallback); ``` 使用Promise后： ```javascript doSomething() .then(result => doSomethingElse(result)) .then(newResult => doThirdThing(newResult)) .then(finalResult => { console.log(`Got the final result: ${finalResult}`); }) .catch(failureCallback); ``` Promise是处理异步编程的一个非常有用的工具，它允许你写出更简洁的代码，避免了复杂的嵌套回调结构，让异步流程更易于管理。