学习JavaScript中的Promise

152 阅读3分钟

回调函数和异步是js语言特性的两大最为突出的点,其中异步,就有我们学习的promise

ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。

1、函数构造Promise(excutor)

要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。

excutor:

  • Promise构造函数接受一个执行器作为参数(excutor,其实就是一个回调函数),在Promise构造函数执行时,会立即执行传入的excutor。
  • excutor函数被调用时,会传入resolve, reject两个函数作为参数;当resolve函数被调用,Promise状态变更为fulfilled(完成);当reject函数被调用,Promise状态变更为rejected(失败)
var promise = new Promise(function(resolve, reject) { //这里就是一个构造器
	console.log("执行构造器")
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

2.Promise的状态

Promise 对象代表一个异步操作,有三种状态:

  • pending: 初始状态。
  • fulfilled: 操作成功完成。
  • rejected: 操作失败。
  1. Promise英语翻译过来的意思就是「承诺」,这样就可以理解成,你承诺一件事情的三个阶段,承诺的开始,执行承诺失败,执行承诺成功。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

3.实际中的方法

.then

then方法本身会自动返回一个新的Promise对象(异步执行),onFulfilled 是用来接收promise成功的值,onRejected 是用来接收promise失败的原因,.then方法注册,当resolve(成功)/reject(失败)的回调函数。

  • resolve(成功) onFulfilled会被调用
const promise = new Promise((resolve, reject) => {
   resolve('fulfilled'); // 成功时:状态由 pending => fulfilled
});
promise.then(result => { 
    console.log(result); // 'fulfilled' ,此时的result便是上面的 resolve()传递过来的'fulfilled'
}, reason => { // onRejected 不会被调用
    
})
  • reject(失败) onRejected会被调用
const promise = new Promise((resolve, reject) => {
   reject('rejected'); // 失败时:状态由 pending => rejected
});
promise.then(result => { // onFulfilled 不会被调用
  
}, reason => { // onRejected 
    console.log(rejected); // 'rejected'
})

如果有两个.then,那么第一个回调函数的完成之后,会将返回的结果作为参数,传入第二个回调函数,如果前一个回调函数返回的Promise对象,这是一个回调函数就会等待该Promise对象有了结果,才会进行下一步。

const promise = new Promise((resolve, reject) => {
   console.log("excutor函数会被立即执行");
   resolve("状态变更为:fulfilled");
});
promise.then(
  (res) => {
    return new Promise((resolve, reject) => {
      resolve("onFulfilled中返回的Promise");
    });
  },
  (reason) => {
    return new Promise((resolve, reject) => {
      resolve("onRejected回调中也可以返回Promise");
    });
  }
).then((res) => {
  console.log(res);//onFulfilled中返回的Promise
});

.catch

.catch方法是返回一个新的Promise对象(异步执行),给Promise添加onRejected回调

const promise = new Promise((resolve, reject) => {
  reject(100);
});
promise
  .catch((reason) => {
    console.log(reason); //100
    return 200; //catch函数返回值将作为新Promise的resolve结果
  })
  .then((res) => {
    // 新Promise执行结果
    console.log(res); //200
  });