2022年了，你真的懂Promise吗？

前言

今天有点闲，今天一个前同事去面试，完了问我Promise我知道怎么用，但是面试官问我怎么自己封装？一脸懵逼...立马带她学习一波，顺便自己复习一下！！！

Promise的简介

Promise是一种解决异步操作的方案，在一段时间内给你一个结果，根据不同的结果，对应不同的承诺结果。Promise有三种状态：pending(等待)、fulfiled(成功)、rejected(失败)，状态一旦改变，就不能再变，也就是说Promise是不可逆的，是不是像极了一个实诚的老实人。 Promise使用场景：

• 解决回调地狱问题，为了让代码更好的维护。
• 解决异步问题，不能说Promise是一步的，而是给异步操作提供了解决方案。
• 同时处理多个异步操作，大部分的场景是同时发生多个请求，获取数据。 相信大家都会怎么用Promise，那我们来探究一下简单的封装...

手写Promise

class myPromise {
    constructor(fn) {
     this.resolvedCallbacks = [];
     this.rejectedCallbacks = [];
     
     this.status = 'PENDING';
     this.value = '';
     
     fn(this.resolve.bind(this), this.reject.bind())
    }
    
    resolve(val) {
        if (this.status === 'PENDING') {
            this.status = 'RESOLVED';
            this.value = val;
            this.resolvedCallbacks.map(cb => cb(val))
        }
    }
    
    reject(val) {
        if (this.status === 'PENDING') {
            this.status = 'REJECTED';
            this.value = val;
            this.rejectedCallbacks.map(cb => cb(val))
        }
    }
    
    then(onFulfilled, onRejected) {
        if (this.state === 'PENDING') {
            this.resolvedCallbacks.push(onFulfilled);
            this.rejectedCallbacks.push(onRejected);
        }
        
        if (this.state === 'RESOLVED') onFulfilled(this.value);
        
        if (this.state === 'REJECTED') onRejected(this.value);
    }
}


let demo = function() {
    return new myPromise((resolve, reject) => {
        setTimeout(() => {
            let count = Math.floor(Math.random() * 100);
            if (count % 2 === 0) {
                resolve('成功');
            } else {
                reject('失败');
            }
        }, 1000)
    })
}

demo().then(value => {
    console.log('成功 === ', value);
}, err => {
    console.log('失败 ===', err)
})