前端 Promise 简介

前端 Promise 简介

Promise概述

Promise是ES6新增的引用类型，可以通过new来进行实例化对象。Promise内部包含着异步的操作。

new Promise(fn)

Promise.resolve(fn)

这两种方式都会返回一个 Promise 对象。

Promise 有三种状态： 等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected），且Promise 必须为三种状态之一只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ，且状态改变之后不会在发生变化，会一直保持这个状态。
Pending 变为 Fulfilled 会得到一个私有value，Pending 变为 Rejected会得到一个私有reason，当Promise达到了Fulfilled或Rejected时，执行的异步代码会接收到这个value或reason。

Promise 实现原理

class Promise {
    constructor() {
        this.state = 'pending'  // 初始化 未完成状态 
        // 成功的值
        this.value = undefined;
        // 失败的原因
        this.reason = undefined;
    }
}

Promise 基本用法
Promise状态只能在内部进行操作，内部操作在Promise执行器函数执行。Promise必须接受一个函数作为参数，我们称该函数为执行器函数，执行器函数又包含resolve和reject两个参数，它们是两个函数。

resolve : 将Promise对象的状态从 Pending(进行中) 变为 Fulfilled(已成功)
reject : 将Promise对象的状态从 Pending(进行中) 变为 Rejected(已失败)，并抛出错误。

使用

let p1 = new Promise((resolve,reject) => {
    resolve(value);
})
setTimeout(() => {
    console.log((p1)); // Promise {<fulfilled>: undefined}
},1)   

let p2 = new Promise((resolve,reject) => {
    reject(reason);
})
setTimeout(() => {
    console.log((p2)); // Promise {<rejected>: undefined}
},1) 

实现原理

p1 resolve为成功，接收参数value，状态改变为fulfilled，不可再次改变。
p2 reject为失败，接收参数reason，状态改变为rejected，不可再次改变。
如果executor执行器函数执行报错，直接执行reject。

所以得到如下代码：

class Promise{
    constructor(executor){
      // 初始化state为等待态
      this.state = 'pending';
      // 成功的值
      this.value = undefined;
      // 失败的原因
      this.reason = undefined;
      let resolve = value => {
         console.log(value);
        if (this.state === 'pending') {
          // resolve调用后，state转化为成功态
          console.log('fulfilled 状态被执行');
          this.state = 'fulfilled';
          // 储存成功的值
          this.value = value;
        }
      };
      let reject = reason => {
         console.log(reason);
        if (this.state === 'pending') {
          // reject调用后，state转化为失败态
          console.log('rejected 状态被执行');
          this.state = 'rejected';
          // 储存失败的原因
          this.reason = reason;
        }
      };
      // 如果 执行器函数 执行报错，直接执行reject
      try{
        executor(resolve, reject);
      } catch (err) {
        reject(err);
      }
    }
  }

检验一下上述代码

class Promise{...} // 上述代码

new Promise((resolve, reject) => {
    console.log(0);
    setTimeout(() => {
        resolve(10) // 1
        // reject('前端小白') // 2
        // 可能有错误
        // throw new Error('百') // 3    
    }, 1000)
})

当执行代码1时输出为 0 后一秒输出 10 和 fulfilled 状态被执行；
当执行代码2时输出为 0 后一秒输出 前端小白 和 rejected 状态被执行
当执行代码3时 抛出错误 百

Promise还是需要多理解理解