Promise(一)持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 8 天，点击查看活动详情 P

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 9 天，点击查看活动详情

Promise

Promise 对象用于表示一个异步操作的最终完成结果。一个 Promise 对象在创建出来时，并不知道它将会成功地完成，或者失败。它能让你把异步操作最终的成功返回或失败返回和程序练习起来。这样使得异步方法可以像同步方法那样返回值。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回值，而知会返回一个Promise，以便在未来的某个时候把值交给使用者。

一个 Promsie 必然处于以下的三种状态之一：

pending：待定，初始状态，既没有成功，也没有失败 fulfilled：已兑现，意味着操作已完成 rejected: 已拒绝，意味着操作已失败

Promise的状态只能从pending变成fulfilled或者rejected,改变之后，状态无法更换。

使用方法

创建 Promise 对象

/**
 * @ params resolve 成功的回调
 * @ params reject  失败的回调
 */
const promise1 = new Promise((resolve, reject) => {
  console.log("成功", resolve(200)); // 成功 underfined
});

promise1.then((res) => {
  console.log(res); // 200
});

上面的代码当中，我们通过new一个Promise的构造函数，向构造函数当中传入一个回调函数，回调函数接收两个参数resolve和reject,这两个分别表示当操作成功时候调用的函数和操作失败以后调用函数。

之后，当我们的操作完成，并且成功的时候，我们会调用resolve()这个函数，这个函数接收一个参数value,这个参数就是 Promise 成功获取到的返回值。假如我们操作失败，我们需要调用reject()函数，reject()函数也接收一个参数reason,这个参数获取操作失败的返回值。

接下来我们来看promise1这个实例对象，promise1这个对象当中有需要方法，其中then和catch我们在项目当中使用的最多，then表示接收成功的回调，catch表示接收失败的回调。当操作成功的时候，会触发then函数，then函数接收两个参数onfulfilled和onrejected，前者是当中操作成功时会调用的回调函数，后者是操作失败时会调用的回调函数。

看下面的代码：

/**
 * @ params resolve 成功的回调
 * @ params reject  失败的回调
 */
const promise1 = new Promise((resolve, reject) => {
  // resolve(200);
  reject(500);
});

promise1.then(
  (res) => {
    console.log("res" + res);
  },
  (error) => {
    console.log("error" + error); // 500
  }
);

当我们在Promise当中调用reject的时候，会进入到onrejected这个函数当中。

Promise当中还有一种处理错误的方法，就是使用catch()函数来接收Promsie构造函数当中抛出的异常。

/**
 * @ params resolve 成功的回调
 * @ params reject  失败的回调
 */
const promise1 = new Promise((resolve, reject) => {
  // resolve(200);
  reject(500);
});

promise1
  .then(
    (res) => {
      console.log("res" + res);
    },
    (error) => {
      console.log("error" + error); // error500
    }
  )
  .catch((error) => {
    console.log("catch" + error);
  });

从上面的代码当中可以发现，当我们在 Promise 当中调用reject()函数时，错误会优先被onrejected捕获，而catch()则捕获不到错误。

promise1
  .then((res) => {
    console.log("res" + res);
  })
  .catch((error) => {
    console.log("catch" + error); // catch500
  });

当我们不给then()传递第二个onrejected()错误处理函数的时候，异常会被抛出，这个时候我们可以使用catch()来接收异常。

链式调用因为Promise.prototype.then和Promise.prototype.catch方法返回的方法也是Promsie，所以我们可以对其进行链式调用

promiseA
  .then((value) => {
    return value + "promiseA";
  })
  .then((value) => {
    console.log(value); // 200promiseA
    return value + "promiseB";
  })
  .then((value) => {
    console.log(value); // 200promiseApromiseB
  });

我们在then当中return value，这个value就是下一个Promise的返回值，当我们使用Promise.then()的时候，接收到的就是上一个Promise获取到的值。

promiseA
  .then((value) => {
    return value + "promiseA";
  })
  .then((value) => {
    console.log(value); // 200promiseA
    return value + "promiseB";
  })
  .then((value) => {
    console.log(value); // 200promiseApromiseB
    y + 2;
  })
  .catch((error) => {
    console.log(error + "---error"); // ReferenceError: y is not defined---error
  });

我们可以在链式调用的最后面使用catch()来收集链式调用当中产生的错误，并对错误进行处理，建议将catch()放在链式调用的最后面。