30行代码封装一个链式调用简易 promise 异步函数

前言

前端开发工程师对 Promise 函数肯定不会陌生，它是 JavaScript 中处理异步场景的利器，但是很多人对 Promise 只知其然，不知其所以然。Promise 主要是为了解决回调地狱以及优雅的处理异步而生。今天通过 30 行代码封装了一个链式调用的简易 Promise 函数（只实现回调），分享给大家。

一、代码

var taskList=[];
var next = function (nextParam) {
    if(taskList.length>0){
        var fn = taskList.shift();
        var result = fn&&fn.call(this,nextParam);
        //同步调
        if(!(result instanceof MyPromise)){
            next(result);
        };
    }
}
 function MyPromise(fn) {
     if(fn){
         fn((a)=>{
             //异步调
             setTimeout(()=>{
                 next(a);
             },0)
         })
     }
     return this;
 };
MyPromise.prototype.then = function (fn) {
    taskList.push(fn);
    return this;
}

二、示例

 var pro = new MyPromise((resolved)=>{
     resolved(1);
 }).then((a)=>{
     console.log(a);//1
    return new MyPromise((resolved)=>{
        setTimeout(()=>{
            resolved(2);
        },1000);
    })
 }).then((a)=>{
    console.log(a);//2
    return 3
 }).then((a)=>{
     console.log(a);//3
 })

三、测试

以下测试结果为1秒钟之后打印出1，再过一秒钟之后打印出2，并且打印出3，再过一秒钟之后打印出4。

四、总结

1. 一旦 new 了 Promise 之后，便定义一个回调作为参数（将回调中的参数传给下一个 next），执行了 Promise 中的第一个参数函数。
2. then 方法：在原型对象上添加 then 方法，then 方法只做一件事情。将 then 的回调 push 到数组中。
3. next 方法：取出数组中第一个参数并执行。如果返回的对象不是 Promise 则是同步函数，那么继续执行下一个 next。