手写Promise方法

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

在工作中我们向后端请求数据，经常使用promise去做，因为promise是异步操作，发送请求时不会阻止异步外的代码运行，且易于对请求状态改变做出对应的操作，我们来实现一下

首先创建一个构造函数，构造函数中接受一个形参，形参是一个回调函数，用于我们创建promise实例时传递过去，我们后面在讲这个用途

我们在构造函数中定义一个状态变量，三个状态的值分别有pending（发送中）resolved（请求成功）rejected（请求失败），状态变量初始状态值默认为pending，在分别定义一个存储成功返回值的变量和存储失败返回值的变量

function myPromise(constructor) {
//状态
    this.status = "pending"
   //接受成功返回值变量
    this.value = undefined;
     //接受失败返回值变量
    this.reason = undefined;
}

在构造函数中在定义两个函数，分别是resolve（成功执行函数）和reject（失败执行函数），我们这里采用箭头函数，使其可以共用作用域变量，无需在改变其this指向，这两个函数中所做的操作都是一样的，都是判断当前的状态是否是pending，如果是pending则进行下一步操作，改变当前初始状态的值和把当前结果传递给对应的接受返回值变量，这样我们就可以实现在使用中通过判断在选择性执行成功或者失败的回调函数并把值传递出去

//成功的回调函数
const resolve=（value）=>{	
        if (this.status === "pending") {
            this.value = value;
            this.status = "resolved";
        }
	
    }
    //失败的回调函数
const reject= (error)=>{
        if (this.status === "pending") {
            this.reason = error;
            this.status = "rejected";
        }
    }

这里我们在加一层try...catch用于捕获构造函数出现异常，我们这个时候就用到了形参回调函数，在其执行时，我们需要将成功的回调函数和失败的回调函数传递进去，同时放到try中防止执行报错，如果执行报错则直接进行执行失败回调函数

    try {
        constructor(resolve, reject);
    } catch (e) {
        reject(e);
    }

我们在构造函数原型上写一个then方法，接受两个参数，第一个参数是成功的执行回调函数，第二个参数是失败的执行回调函数，我们通过判断构造函数中的状态值进行选择性执行then方法中的成功回调函数或失败回调

myPromise.prototype.then = function(onFullfilled, onRejected) {
    switch (this.status) {
        case "resolved":
            onFullfilled(this.value);
            break;
        case "rejected":
            onRejected(this.reason);
            break;
    }

我们使用一下

//创建myPromise实例
const pro = new myPromise(function(resolve, reject) {
//抛出成功函数
    resolve(1)
    //抛出失败函数
  //  reject(2)
});
//我们通过实例使用myPromise上的then方法，第一个参数为成功函数，第二个参数为失败函数，并将其所传递的值打印出来
pro.then(function(res) {
    console.log(res)
},function(err) {
    console.log(err)
})

坚持努力，无惧未来！