关于Promise规范及简单应用

最新推荐文章于 2022-05-20 14:29:15 发布

大聪明397

最新推荐文章于 2022-05-20 14:29:15 发布

阅读量823

点赞数 1

分类专栏：前端基础文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/weixin_48391468/article/details/121453120

版权

本文介绍了Promise的基本概念、状态转换以及规范细节，包括Promise的三种状态、then方法的实现原理和手写Promise类的思路。重点讨论了then方法的参数要求、执行特性以及返回值规则，并探讨了微任务在Promise中的作用。通过实例展示了如何使用和测试自己实现的Promise类。

摘要由CSDN通过智能技术生成

什么是promise？

promise是异步编程的一种解决方案

术语

1.promise 是一个有then方法的函数或者对象
2.thenable 是一个有then方法的函数或者对象
3.value 是promise成功时候的值也就是resolve的参数，类型可以是undefined/thenable promise，number，boolean，string，object等
4.reason 是promise失败时候的值也就是reject的参数，标识失败的原因
5.exception 是使用throw抛出的异常值

规范

Promise States

promise应该有三种状态
1.pending
初始状态（可以改变），在resolve和reject之前，都是处于这个状态
resolve -> fulfilled
reject -> rejected
2.fulfilled
最终态，不可改变
一个promise 被resolve之后变成这个状态
必须拥有一个value值
3.rejected
最终态，不可改变
一个promise 被reject之后变成这个状态
必须拥有一个reason值
所以其实promise有两条路线：
pending -> resolve(value) -> fulfilled
pending -> reject(reason) -> rejected

then

promise应该提供一个then方法，用来返回最终结果

promise.then(onFulfilled,onRejected)

1.参数要求：onFulfilled和onRejected都必须是函数类型，如果不是函数，应该被忽略
2.特性：在promise编程fulfilled/rejuected时（在这之前不能调用），应该调用onFulfilled/onRejected，参数是value/reason，只能被调用一次（可能需要设置一个变量来限制执行次数）
3.onFulfilled和onRejected执行的时候应该是微任务：queueMicrotask来实现微任务调用
4.then可以被调用多次：promise变成onFulfilled/onRejected后，所有的回调都应该按then的顺序执行（用数组来存放onFulfilled/onRejected list）
5.then的返回值：应该返回一个promise

promise2 = promise1.then(xx,xxx)

假如onFulfilled/onRejected的执行结果是x，调用resolvePromise方法
如果onFulfilled/onRejected执行的时候抛异常e，promise2应该直接被reject
如果onFulfilled/onRejected不是一个函数，那么promise2以promise1的value触发onFulfilled/onRejected
6.resolvePromise（用以解析promise）

resolvePromise(promise2,x,resolve,reject)

（1）如果promise2和x强相等那么reject TypeError
（2）如果x是一个promise：
（2.1）如果x是pending，promise一定继续pending，直到x变成了onFulfilled/onRejected
（2.2）如果x是onFulfilled/onRejected，resolve same value/reject same reason
（3）如果x是一个function/object

	try
	let then = x.then;
	catch(e)
	reject promise e;

手写promise类

思路：
1.咱平常使用promise时，new Promise((resolve,reject)=>{})，既然要new，肯定就有constructor

constructor(){
   
        //初始状态
        this.status = PENDING;
        this.value = null;
        this.reason = null;
    }

2.promise有各个阶段的状态，咱也整点

//状态
const PENDING = "pending"
const FULFILLED = "fullfilled"
const REJECTED = "rejected"

3.前两个都有了，开始实现resolve和reject

	resolve(value){
   
        //限制条件
        if(this.status === PENDING){
   
            this.value = value;
            this.status = FULFILLED;
        }
    }
    reject(reason){
   
        if(this.status === PENDING){
   
            this.reason = reason;
            this.status = REJECTED;
        }

这里有一个重要的点就是：在两个函数的最开始，需要进行判断，必须是pending时，才可以resolve/reject，原因：假如现在处于rejected的状态，这个时候又走了resolve方法，那么对于status的处理是有问题的
4.现在还缺少promise构造时候的入参
注意点：入参是一个函数，接收resolve/reject，而且在初始化的时候就要执行这个函数，遇到报错直接reject

	constructor(){
   
        //初始状态
        this.status = PENDING;
        this.value = null;
        this.reason = null;
		//绑定this
        try {
   
            fn(this.resolve.bind(this),this.reject.bind(this));
        } catch (e) {
      
            this.reject(e);
        }
    }