JavaScript Promise 和 Promise 链

在 JavaScript 中，Promise 是处理异步操作的一种好方法。它用于确定异步操作是否成功完成。

Promise 可能有三种状态之一。

• Pending
• Fulfilled
• Rejected

Promise 从 pending（待定）状态开始。这意味着过程尚未完成。如果操作成功，过程将以 fulfilled（已完成）状态结束。如果发生错误，过程将以 rejected（已拒绝）状态结束。

例如，当你通过 Promise 从服务器请求数据时，它将处于 pending 状态。当数据成功到达时，它将处于 fulfilled 状态。如果发生错误，则它将处于 rejected 状态。

创建 Promise

要创建 Promise 对象，我们使用 Promise() 构造函数。

let promise = new Promise(function(resolve, reject){
     //do something
});

Promise() 构造函数接受一个函数作为参数。该函数还接受两个函数 resolve() 和 reject()。

如果 Promise 成功返回，则调用 resolve() 函数。如果发生错误，则调用 reject() 函数。

假设下面的程序是一个异步程序。那么该程序可以使用 Promise 来处理。

示例 1：带 Promise 的程序

const count = true;

let countValue = new Promise(function (resolve, reject) {
    if (count) {
        resolve("There is a count value.");
    } else {
        reject("There is no count value");
    }
});

console.log(countValue);

输出

Promise {<resolved>: "There is a count value."}

在上面的程序中，创建了一个 Promise 对象，该对象接受两个函数：resolve() 和 reject()。如果过程成功，则使用 resolve()；如果 Promise 中发生错误，则使用 reject()。

如果 count 的值为 true，则 Promise 将被 resolved。

JavaScript Promise 链式调用

当你必须一个接一个地处理多个异步任务时，Promise 非常有用。为此，我们使用 Promise 链式调用。

你可以使用 then()、catch() 和 finally() 方法在 Promise fulfilled 后执行操作。

JavaScript then() 方法

当 Promise 成功 fulfilled 或 resolved 时，then() 方法与回调一起使用。

then() 方法的语法是

promiseObject.then(onFulfilled, onRejected);

示例 2：使用 then() 链式调用 Promise

// returns a promise

let countValue = new Promise(function (resolve, reject) {
  resolve("Promise resolved");
});

// executes when promise is resolved successfully

countValue
  .then(function successValue(result) {
    console.log(result);
  })

  .then(function successValue1() {
    console.log("You can call multiple functions this way.");
  });

输出

Promise resolved
You can call multiple functions this way.

在上面的程序中，使用 then() 方法将函数链式调用到 Promise。当 Promise 成功 resolved 时，调用 then() 方法。

你可以将多个 then() 方法与 Promise 链式调用。

JavaScript catch() 方法

当 Promise 被 rejected 或发生错误时，catch() 方法与回调一起使用。例如，

// returns a promise
let countValue = new Promise(function (resolve, reject) {
   reject('Promise rejected'); 
});

// executes when promise is resolved successfully
countValue.then(
    function successValue(result) {
        console.log(result);
    },
 )

// executes if there is an error
.catch(
    function errorValue(result) {
        console.log(result);
    }
);

输出

Promise rejected

在上面的程序中，Promise 被 rejected。然后使用 catch() 方法与 Promise 一起处理错误。

JavaScript Promise 与 Callback 对比

从某种意义上说，Promise 与 回调函数类似，因为它们都可以用来处理异步任务。

JavaScript 回调函数也可以用于执行同步任务。

它们的区别可以总结为以下几点

JavaScript Promise

1. 语法友好且易于阅读。
2. 错误处理更容易管理。
3. 示例

   
   api().then(function(result) {
       return api2() ;
   }).then(function(result2) {
       return api3();
   }).then(function(result3) {
       // do work
   }).catch(function(error) {
       //handle any error that may occur before this point 
   });

JavaScript Callback

1. 语法难以理解。
2. 错误处理可能难以管理。
3. 示例

   
   api(function(result){
       api2(function(result2){
           api3(function(result3){
                // do work
               if(error) {
                   // do something
               }
               else {
                   // do something
               }
           });
       });
   });

JavaScript finally() 方法

你也可以将 finally() 方法与 Promise 一起使用。当 Promise 被成功 resolved 或 rejected 时，finally() 方法将被执行。例如，

// returns a promise
let countValue = new Promise(function (resolve, reject) {
    // could be resolved or rejected   
    resolve('Promise resolved'); 
});

// add other blocks of code
countValue.finally(
    function greet() {
        console.log('This code is executed.');
    }
);

输出

This code is executed.

JavaScript Promise 方法

Promise 对象有各种可用的方法。

要详细了解 Promise，请访问 JavaScript Promises。

另请阅读

• Javscript async/await