ES6中异步对象Promise用法详解

什么是Promise

Promise是 ES6 引入，用于异步编程的一种解决方案。简单来说，Promise就是一个代表了异步操作的对象，该对象可以用来获取异步操作结果。Promise 对象在异步操作的初始阶段就返回给调用方一个代表结果的“承诺”，以后当异步操作完成时，Promise 会根据异步操作的结果，改变自己的状态，并返回相应的结果。

Promise 有3种状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。Promise 实例的状态只能由 Pending 转为 Fulfilled 或 Rejected，一旦发生变化就无法再改变，状态变化后就会触发相应的回调函数。

Promise的特点

Promise 有以下几个特点：

• Promise对象不阻塞主线程，因此可以提高代码性能。
• Promise对象可以处理异步请求的顺序，进而解决回调地狱问题。
• Promise可以链式调用，美化代码，增加可读性。

Promise的用法

先看 Promise 的基本用法：

const promise = new Promise((resolve, reject) => {
    // 异步操作代码...
    if(asyncOperationIsSuccessful){
        resolve(result); //将异步操作成功的结果传给then回调函数
    }else{
        reject(error); //将异步操作失败的原因传给catch回调函数
    }
});

Promise 构造器传入一个函数，该函数接受两个参数：回调函数 resolve 和 reject 。异步操作完成时调用 resolve 函数，传入异步操作成功的结果，然后 Promise 实例的状态就会从 Pending 转为 Fulfilled。异步操作遇到错误时调用 reject 函数，把错误原因传给 catch 回调函数，Promise 实例的状态就会从 Pending 转为 Rejected。

Promise 对象实例调用 then 方法接收异步操作成功的结果，并可以继续链式调用 then 方法处理结果。catch 方法接收异步操作失败的原因。

以下是Promise链式调用的示例：

function asyncFunc(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve("异步操作成功的结果");
        },2000);
    });
}
asyncFunc().then((result)=>{
    console.log(result+"，处理异步操作成功的结果");
}).catch((error)=>{
    console.log(error+"，捕获异步操作失败的原因");
});

以上示例中，异步操作是两秒后成功，返回了 "异步操作成功的结果"。然后调用了 then 方法，传入一个回调函数，该回调函数接收了异步操作成功的结果。在该回调函数中处理异步操作成功的结果，并打印出 "异步操作成功的结果，处理异步操作成功的结果"。如果异步操作失败了，调用 catch 方法，接收异步操作失败的原因，并打印出 "捕获异步操作失败的原因"。

Promise.all 与 Promise.race

Promise.all 可以同时处理多个异步操作，等到所有异步操作都完成后，才执行回调函数。

以下是 Promise.all 的示例：

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, '异步操作成功的结果');
});

Promise.all([promise1, promise2, promise3]).then((results) => {
    console.log(results); // [3, 42, "异步操作成功的结果"]
}).catch((error)=>{
   console.log(error+"，其中有异步操作失败");
});

以上示例中，Promise.all 接收一个数组，数组中放入了三个异步回调函数，其中一个 Promise.resolve（已完成异步处理）的回调函数，一个已经处理完返回的数据，以及一个使用 setTimeout 模拟异步处理的回调函数。Promise.all 会在所有异步操作均完成后触发回调函数，将每个异步操作成功的结果作为数组返回。

Promise.race 接收的参数与 Promise.all 相同，但是只会执行最快执行完成的异步操作的回调函数。

以下是 Promise.race 的示例：

const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, '异步操作成功的结果1');
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, '异步操作成功的结果2');
});

Promise.race([promise1, promise2]).then((result) => {
    console.log(result); // '异步操作成功的结果2'
}).catch((error)=>{
   console.log(error+"，其中有异步操作失败");
});

以上示例中，Promise.race 接收的参数是两个具有不同延时的回调函数，Promise.race 方法会执行执行完成时间最快的回调函数，运行结果与延时最短的回调函数返回结果相同。在上面的示例中，异步操作2返回结果的延时时间短于异步操作1返回的时间，因此会打印出异步操作2的成功结果。

总结

ES6中的Promise，提供了更加方便、可靠的异步编程方式。Promise 对象在异步操作的初始阶段就返回给调用方一个代表结果的“承诺”，这个承诺将伴随异步操作的不同状态变化而发生相应的变化。Promise通过链式调用的方式让异步代码更加的优雅和清晰，同时也可以解决回调地狱问题。