11-期约与异步函数 - 高频[白板]promise原理及手写 - 《前端手册》

Promise
原型方法
方法
其他方法
- Promise.resolve()
- Promise.reject()

https://juejin.cn/post/6844904063570542599

Promise

三种状态

pending

fulfilled

rejected

执行流程

优点：

统一异步API

Promise与事件对比，更适合处理一次性的结果

解决回调地狱

更好的错误处理方式

缺点：

无法取消

不设置回调函数， promise内部抛出错误反应到外部

pending状态，无法得知进展到哪一个阶段

报错堆栈上下文不太友好

依据Promise/A+规范
自身状态
1、state 存放当前的状态。
2、value 存放当前状态的值。

简介版

6个主要属性。 state、value、reason、reslove、reject、then

function MyPromise(executor) {
    this.state = "pending";
  this.value;
  this.state;
  let resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
      this.value = value;
    }
  }
  let reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
      this.reason = reason;
    }
  }
  try {
      executor(reslove, reject);  // 立即执行函数
  } catch (e) {
      reject(e)
  }
}
MyPromise.prototype.then = function (onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value)
  }
  if (this.state === 'rejected') {
      onRejected(this.reason)
  }
}

基础版（重要）

// 基础版
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
function MyPromise(executor) {
    this.state = PENDING; // 状态
    this.value = undefined; // 成功状态的值
    this.reason = undefined; // 失败状态的值
    this.onFulfilledCallbacks = []; // 存放fulfilled对应的onFulfilled函数
    this.onRejectedCallbacks = [];  // 存放rejected对应的onRejected函数
    let resolve = value => {
            if (value instanceof Promise) {
            return value.then(resolve, reject);
        }
        // 确保异步执行
        setTimeout (() => {
            if (this.state == PENDING) {
            this.state = FULFILLED;
            this.value = value;
            this.onFulfilledCallbacks.forEach(cb => cb(this.value))
            }
        }, 0)
    }
    let reject = reason => {
        setTimeout (() => {
            if (this.state == PENDING) {
            this.state = REJECTED;
            this.reason = reason;
            this.onRejectedCallbacks.forEach(cb => cb(this.reason))
            }
        }, 0)
    }
    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error);
    }
}
MyPromise.prototype.then = function (onFulfilled, onRejected) {
  let promise2;
  // 处理参数默认值， 保证后续继续执行
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => {
      throw reason;
  };
  if (this.state === FULFILLED) {
        return promise2 = new Promise((resolve, reject) => {
          setTimeout(() => {
          try {
          let x = onFulfilled(this.value);
          this.reslovePromise(promise2, x, resolve, reject)
        } catch (error) {
          reject(error)
        }
      }, 0)
         })    
  }
    if (this.state === REJECTED) {
      return promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onRejected(this.value);
            this.reslovePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      })    
    }
    if (this.state === PENDING) {
      // 等待promise状态暂存后再处理
      return promise2 = new Promise((resolve, reject) => {
          this.onFulfilledCallbacks.push((value) => {
            try {
              let x = onFulfilled(value);
            this.resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
              reject(error)
          }
        });
        this.onRejectedCallbacks.push((value) => {
            try {
              let x = onRejected(reason);
            this.resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
              reject(error)
          }
        })
      });
    }
}
// 测试
new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    },0)
}).then(value => {
    console.log('fulfilled', value);
})
new MyPromise((resolve, reject) => {
    setTimeout(() => {
        reject(2)
    },0)
}).then(value => {
    // console.log('fulfilled', value);
}, reject => {
    console.log('rejected', reject);
})

1、实现一个 promise ，在 setTimeout 中去 resolve。 ok
2、实现一个 promise，直接同步 resolve。 ok
3、实现一个 promise，防止 resolve 多次。 ok
4、实现一个 promise，可以让 then 方法链式调用。 ok
5、实现一个 promise，支持空 then 函数。 ok
6、实现一个 promise，支持 then 传递 thenable 对象。 ok
7、实现一个 promise，支持 then 传递 promise 对象。 ok
8、实现一个 promise，支持 resolve 传递 promise 对象。 ok
9、实现一个 promise，处理 then 中的循环 promise。 ok
10、实现一个 promise，支持静态方法 Promise.all。 ok
11、实现一个 promise，支持 reject 和 catch。 ok
12、实现一个 promise，支持处理完成态或失败态的then。 ok

原型方法

Promise.prototype.then(onFulfilled[, onRejected])

返回一个promise，两个参数分别是成功/失败回调函数

const p = new Promise((resolve, reject) => {
})
p.then((res) => {
    console.log(res)
}).catch((error) => {
    console.log(error)
})

then方法链式调用

MyPromise.prototype.then = function (onFulfilled, onRejected) {
    if (this.state == PENDING) {
        this.onRresolvedCallbacks.push(onFulfilled);
        this.onEjectedCallbacks.push(onRejected);
    }
    if (this.state == FULFILLED) {
        onFulfilled(this.value)
    }
    if (this.state == REJECTED) {
        onRejected(this.reason)
    }
}

then方法支持多次调用

MyPromise.prototype.then = function (onFulfilled, onRejected) {
  // 格式检查， 如果不是函数
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (value) {};
  onRejected = typeof onRejected === 'function' ? onRejected : function (reason) {};
  let promise2 = new Promise((resolve, reject) => {
      if (this.state === FULFILLED) {
    }
    if (this.state === REJECTED) {
    }
    if (this.state === PENDING) {
      // 等待promise状态后再处理
    }
     })
}

Promise.prototype.catch(onRejected)

Promise.prototype.then(undefined, onRejected)简写。返回一个promise, 参数是失败回调函数。

p.catch((error) => {
    console.log(error)
})

catch实现

MyPromise.prototype.catch = function (onRejected) {
    return this.then(null, onRejcted)
}

Promise.prototype.finally(onFinally)

与Promise.prototype.finally(onFinally, onFinally)。返回一个promise，一个参数是成功/失败回调函数。
适用场景：关闭加载动画

fetch()
    .then()
    .catch()
  .finally(() => {
      isLoading = false
  })

方法

Promise.race(iterable)

返回一个promise, 一旦迭代器中有一个promise成功/失败，则返回1已成功/失败的promise

Promise.all(iterable)

等待全部完成/第一个是失败

Promise.allSettled(iterable)

Promise.allSettled 了解吗？动手实现一下 Promise.allSettled
返回promise组成的数组，等待迭代器全部元素的成功/失败。

其他方法

Promise.resolve()

Promise.reject()

参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/race
https://juejin.im/post/5b2f02cd5188252b937548ab
https://juejin.cn/post/6844903788826853389

高频[白板]promise原理及手写