关于Promise的一些理解

关于Promise

  1. 一个 Promise 必然处于以下几种状态之一:

pending: 初始状态,既没有被兑现,也没有被拒绝。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”(executor function)的函数作为它的参数。这个“处理器函数”接受两个函数——resolve 和 reject ——作为其参数。

const p = new Promise((resolve,reject)={
	// 我们的代码
})

当我们调用 resolve 函数 promise的状态由pending变为fulfilled,也就是成功完成;
当我们调用 reject 函数promise的状态由pending变为reject,也就是失败。
内部抛出错误 throw new Error() 也会使得promise的状态由pending变为reject。

  1. 一个Promise实例有以下三个方法
  • Promise.prototype.then(onFulfilled, onRejected)

给当前promise添加解决(fulfillment)和拒绝(rejection)回调, 返回一个新的 promise;
当前的promise状态变化之后,执行对应的回调函数,

返回的这个promise状态变化由回调控制,

  1. 回调中返回一个Promise实例,则新的promise可以理解为就等于这个返回实例,其状态自然就和它同步了。
  2. 回调中返回 thenable对象(thenable对象指的是具有then方法的对象),以其then方法作为入参构造一个新的Promise并返回,剩下的同上。
  3. 返回其他,新的promise 状态 pending -> resolve
  4. 回调中抛出错误,新的promise 状态pending -> rejected
  • Promise.prototype.catch(onRejected)

给当前promise添加一个拒绝(rejection) 回调, 返回一个新的promise。
可以看做,Promise.prototype.then(()=>{}, onRejected)
返回新的promise状态变化依据上面的判断

  • Promise.prototype.finally(onFinally)

给当前promise对象添加一个事件finally回调,返回一个新的promise。
可以看做,Promise.prototype.then(()=>{onFinally()}, ()=>{onFinally() throw new Error()})
返回新的promise状态变化依据上面的判断

一个promise的状态只会变化一次 由 pending-> fulfilled 或者 pending -> rejected只有这两种变化。
rejection回调会在promise状态变为 rejected 时被调用,
fulfillment回调会在promise状态边玩车 fulfilled的时候被调用。
finally会无论promise的状态如何最终都会被调用,
注册多个相同类型的回调,调用顺序为注册的顺序。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(1);
    resolve();
  }, 1000);
  reject()
  console.log(2);
});
console.log(3)
promise1
  .then(
    () => {
      console.log(4);
      throw new Error();
    },
    () => {
      console.log(5);
      throw new Error();
    }
  )
  .then(
    () => {
      console.log(6);
    },
    () => {
      console.log(7);
    }
  )
  .catch(() => {
    console.log(8);
  })
  .then(() => {
    console.log(9);
  });
  console.log(10);

最终出为 ????

我们先把链式调用分开写,这样清晰些

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(1);
    resolve();
  }, 1000);
  reject();
  console.log(2);
});
console.log(3);

const p3 = p1.then(
  () => {
    console.log(4);
    throw new Error();
  },
  () => {
    console.log(5);
    throw new Error();
  }
);
const p4 = p3.then(
  () => {
    console.log(6);
  },
  () => {
    console.log(7);
  }
);
const p5 = p4.catch(() => {
  console.log(8);
});
const p6 = p5.then(() => {
  console.log(9);
});
console.log(10);

根据上面的推断
最终输出为 2 3 10 5 7 9 1

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页