一瓶肥宅水的时间，上手promise原理（1）

一瓶肥宅水的时间，上手promise原理（1）

随着ES6的标准出现，promise就成为了处理异步操作的新宠，越来越多的前端工程师选择用promise来处理异步，解决回调地狱的方案。今天就来聊一聊promise的原理，自己手写实现promise。

1、我们可以确定的是promise是一个对象的形式被new出来。

class Promise {}

2、我们要知道，在promise中有三种状态，分别为pending、fulfilled、rejected，代表等待，成功，失败。

class Promise {
    static PENDING = 'pending';
    static FULFILLED = 'fulfilled';
    static REJECTED = 'rejected';
}

3、我们知道在new promise的时候 ，会在初始化时设置初始status，返回值，传入参数，这个参数是一个function,这个参数接受resolve，reject两个方法作为参数。

class Promise {
    static PENDING = 'pending';
    static FULFILLED = 'fulfilled';
    static REJECTED = 'rejected';
    constructor(executor){
        this.status = promise.PENDING;
        this.value = null;
       executor(this.resolve.bind(this),this.reject.bind(this))
    }
    resolve(value){
        this.status = Promise.FUFILLED;
        this.value=value;
    }
    reject(reason){
        this.status=Promise.REJECTED;
        this.value=reason
    }
}

4、因为在promise中，状态是不可逆的，所以resolve和rejected需要添加判断，只有在状态为pending的情况才会去处理

resolve(value){
    if(this.status ==Promise.PENDING){
        this.status = Promise.FUFILLED;
        this.value=value;
    }
}
reject(reason){
    if(this.status == Promise.PENDING){
        this.status=Promise.REJECTED;
        this.value=reason
    }
}

5、有种情况，在你初始化调用executor的时候，去console.log(不存在的值)，会报错，我们应该j进行try...catch，将报错信息交给rejected来处理

try {
   executor(this.resolve.bind(this), this.reject.bind(this));
 } catch (error) {
   this.reject(error);
 }

然后测试一下最基本的promise代码实现

<script src="HD.js"></script>
<script>
  let p = new Promise((resolve, reject) => {
    resolve("Hello world");
  });
  console.log(p);
</script>