本文分享自微信公众号 - 前端巅峰（Java-Script-）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与 “OSC 源创计划”，欢迎正在阅读的你也加入，一起分享。

一杯喜茶的时间手搓Promise

作者：JowayYoung
仓库：Github、CodePen
博客：官网、掘金、思否、知乎
公众号：IQ前端
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

本文由笔者师妹LazyCurry创作，收录于笔者技术文章专栏下

前言

我们都知道，JS是单线程的，只有前一个任务结束，才能执行下一个任务。显然在浏览器上，这样执行会堵塞浏览器对DOM的渲染。所以，JS中会有很多异步操作，那JS是如何实现异步操作呢？这就要想到Promise对象了，文本先来认识Promise，再手写代码实现Promise。

认识Promise

Promise是JS解决异步编程的方法之一，其英文意思是承诺。在程序中可理解为等一段时间就会执行，等一段时间就是JS中的异步。异步是指需要比较长的时间才能执行完成的任务，例如网络请求，读取文件等。Promise是一个实例对象，可从中获取异步处理的结果。

Promise有3种状态，分别是pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作可改变Promise的状态，其他操作都无法改变。并且状态改变后就不会再变，只能是从pending到fulfiled或pending到rejected，这也是Promise一个比较鲜明的特点。

使用Promise

上述已说到，Promise是一个对象，那么它肯定是由其构造函数来创建。其构造函数接受一个函数作为参数，其函数的参数有2个，分别是resolve和reject。resolve将状态从pending变为fulfiled，成功时调用。reject将状态从pending变为rejected，失败时调用。

function RunPromise(num, time) {
    return new Promise((resolve, reject) => {
        console.log("开始执行");
        if (num % 2 === 0) {
            setTimeout(() => {
                resolve(`偶数时调用resolve，此时num为${num}`);
            }, time);
        } else {
            setTimeout(() => {
                reject(new Error(`奇数时调用rejected，此时num为${num}`));
            }, time);
        }
    });
}

Promise对象上有then()和catch()方法。then()接收2个参数，第一个对应resolve的回调，第二个对应reject的回调。catch()跟then()的第二个参数一样，用来接受reject的回调，但是还有一个作用，如果在then()中执行resolve回调时抛出异常，这个异常可能是代码定义抛出，也可能是代码错误，而这个异常会在catch()被捕获到。

RunPromise(22, 2000)
    .then(res => {
        console.log("then的第一个参数执行");
        console.log(res);
        console.log(newres);
    }, error => {
        console.log("then的第二个参数执行");
        console.log(error);
    })
    .catch(error => {
        console.log("error");
        console.log(error);
    });

// 输出结果如下：
// 开始执行
// then的第一个参数执行
// 偶数时调用resolve，此时num为22
// error
// ReferenceError: newres is not defined

上面例子中，RunPromise()调用resolve，then()的第一个参数对应回调，状态从pending改成fulfilled，且状态不会再改变。在then()中，newres这个变量尚未定义，因此程序出错，其异常在catch()被捕获。一般来说，then()使用第一个参数即可，因为catch()跟then()的第二个参数一样，还能捕获到异常。

实现Promise

Promise大致已了解清楚，也知道如何使用。为了了解Promise是如何实现的，我们手写实现一个简单的Promise方法，简单地实现then()、异步处理、链式调用。用最简单的思考方法，函数是为了实现什么功能，给对应函数赋予相应的实现代码即可。以下代码均使用ES6进行书写。

定义Promise构造函数

创建Promise对象使用new Promise((resolve, reject) => {})，可知道Promise构造函数的参数是一个函数，我们将其定义为implement，函数带有2个参数：resolve，reject，而这2个参数又可执行，所以也是一个函数。

声明完成后，需要解决状态。上述已说过，Promise有3种状态，这里不再细说，直接上代码。

// ES6声明构造函数
class MyPromise {
    constructor(implement) {
        this.status = "pending"; // 初始化状态为pending
        this.res = null; // 成功时的值
        this.error = null; // 失败时的值
        const resolve = res => {
            // resolve的作用只是将状态从pending转为fulfilled，并将成功时的值存在this.res
            if (this.status === "pending") {
                this.status = "fulfilled";
                this.res = res;
            }
        };
        const reject = error => {
            // reject的作用只是将状态从pending转为rejected，并将失败时的值存在this.error
            if (this.status === "pending") {
                this.status = "rejected";
                this.error = error;
            }
        };
        // 程序报错时会执行reject，所以在这里加上错误捕获，直接执行reject
        try {
            implement(resolve, reject);
        } catch (err) {
            reject(err);
        }
    }
}

then函数

我们在使用Promise时，都知道then()有2个参数，分别是状态为fulfilled和rejected时的回调函数，我们在这里将2个函数定义为onFulfilled和onRejected。

class MyPromise {
    constructor(implement) { ... }
    then(onFulfilled, onRejected) {
        // 当状态为fulfilled时，调用onFulfilled并传入成功时的值
        if (this.status === "fulfilled") {
            onFulfilled(this.res);
        }
        // 当状态为rejected时，调用onRejected并传入失败时的值
        if (this.status === "rejected") {
            onRejected(this.error);
        }
    }
}

异步处理

到这里已实现了基本的代码，但是异步时会出现问题。例如，本文一开始举例使用Promise时，resolve在setTimeout()中使用，这时候在then()里，状态还是pending，那就没办法调用到onFulfilled。所以我们先将处理函数(onFulfilled或onRejected)保存起来，等到then()被调用时再使用这些处理函数。

因为Promise可定义多个then()，所以这些处理函数用数组进行存储。实现思路：

• then()增加状态为pending的判断，在此时存储处理函数
• resolve或reject时循环调用处理函数

class MyPromise {
    constructor(implement) {
        this.status = "pending";
        this.res = null;
        this.error = null;
        this.resolveCallbacks = []; // 成功时回调的处理函数
        this.rejectCallbacks = []; // 失败时回调的处理函数
        const resolve = res => {
            if (this.status === "pending") {
                this.status = "fulfilled";
                this.res = res;
                this.resolveCallbacks.forEach(fn => fn()); // 循环执行成功处理函数
            }
        };
        const reject = error => {
            if (this.status === "pending") {
                this.status = "rejected";
                this.error = error;
                this.rejectCallbacks.forEach(fn => fn()); // 循环执行失败处理函数
            }
        };
        try {
            implement(resolve, reject);
        } catch (err) {
            reject(err);
        }
    }
    then(onFulfilled, onRejected) {
        if (this.status === "fulfilled") {
            onFulfilled(this.res);
        }
        if (this.status === "rejected") {
            onRejected(this.error);
        }
        // 当状态为pending时，说明这时还没有调用到resolve或reject
        // 在这里把成功函数和失败函数存至相应的数组中，不做执行操作只做存储操作
        if (this.status === "pending") {
            this.resolveCallbacks.push(() => onFulfilled(this.res));
            this.rejectCallbacks.push(() => onRejected(this.error));
        }
    }
}

测试一下异步功能，打印结果中，''执行resolve''是等待了2秒后打印出来的

new MyPromise((resolve, reject) => {
    console.log("开始执行");
    setTimeout(() => {
        resolve("执行resolve");
    }, 2000);
}).then(res => console.log(res));

// 输出结果如下：
// 开始执行
// 执行resolve

链式调用

到这里就已实现异步操作啦！吼吼～但是，我们都知道，Promise能定义多个then，就例如new Promise().then().then()，这种就是链式调用。当然我们也要实现这个功能。

链式调用是指Promise在状态是fulfilled后，又开始执行下一个Promise。要实现这个功能，我们只需要在then()里返回Promise就好了，说起来好像是挺简单的。

then()的实现思路：

• then()中需要返回Promise对象，我们将其命名为nextPromise
• 仍然需要判断状态，执行相应处理
• onFulfilled和onRejected是异步调用，用setTimeout(0)解决
• 需要对onFulfilled和onRejected类型做判断，并做相应返回

class MyPromise {
    constructor(implement) { ... }
    then(onFulfilled, onRejected) {
        // 如果onRejected不是函数，就直接抛出错误
        onFulfilled = typeof onFulfilled === "function" ? onFulfilled : res => res;
        onRejected = typeof onRejected === "function" ? onRejected : err => { throw err; };
        const nextPromise = new MyPromise((resolve, reject) => {
            if (this.status === "fulfilled") {
                // 解决异步问题
                setTimeout(() => {
                    const x = onFulfilled(this.res);
                    RecursionPromise(nextPromise, x, resolve, reject);
                }, 0);
            }
            if (this.status === "rejected") {
                setTimeout(() => {
                    const x = onRejected(this.error);
                    RecursionPromise(nextPromise, x, resolve, reject);
                }, 0);
            }
            if (this.status === "pending") {
                this.resolveCallbacks.push(() => {
                    setTimeout(() => {
                        const x = onFulfilled(this.res);
                        RecursionPromise(nextPromise, x, resolve, reject);
                    }, 0);
                });
                this.rejectCallbacks.push(() => {
                    setTimeout(() => {
                        const x = onRejected(this.error);
                        RecursionPromise(nextPromise, x, resolve, reject);
                    }, 0);
                });
            }
        });
        return nextPromise;
    }
}

RecursionPromise()用来判断then()的返回值，以决定then()向下传递的状态走resolve还是reject，实现思路：

• nextPromise与x不能相等，否则会一直调用自己
• 判断x的类型，如果不是函数或对象，直接resolve(x)
• 判断x是否拥有then()，并且如果then()是一个函数，那么就可执行x的then()，并且带有成功与失败的回调
• flag的作用是执行x的then()时成功与失败只能调用一次
• 执行x的then()，成功时继续递归解析
• 如果then()不是一个函数，直接resolve(x)

function RecursionPromise(nextPromise, x, resolve, reject) {
    if (nextPromise === x) return false;
    let flag;
    if (x !== null && (typeof x === "object" || typeof x === "function")) {
        try {
            let then = x.then;
            if (typeof then === "function") {
                then.call(x, y => {
                    if (flag) return false;
                    flag = true;
                    // 这里说明Promise对象resolve之后的结果仍然是Promise，那么继续递归解析
                    RecursionPromise(nextPromise, y, resolve, reject);
                }, error => {
                    if (flag) return false;
                    flag = true;
                    reject(error);
                });
            } else {
                resolve(x);
            }
        } catch (e) {
            if (flag) return false;
            flag = true;
            reject(e);
        }
    } else {
        resolve(x);
    }
}

总结

具有异步处理和链式调用的Promise已实现啦！还有一些方法在这里就不一一实现了。毕竟实现一个完整的Promise不是一篇文章就能讲完的，有兴趣的同学可自行参照Promise的功能进行解构重写，若有写得不正确的地方请各位大佬指出。公众号后台回复promise可获取本文的源码，如果是转载的文章，可关注IQ前端再回复promise即可。

写这篇文章的目的是为了给各位同学提供一个函数解构的思路，学会去分析一个函数的功能，从而解构出每一个步骤是如何执行和实现的，祝大家学习愉快，下次再见~

结语

❤️关注+点赞+收藏+评论+转发❤️，原创不易，鼓励笔者创作更多高质量文章

关注公众号IQ前端，一个专注于CSS/JS开发技巧的前端公众号，更多前端小干货等着你喔

• 关注后回复资料免费领取学习资料
• 关注后回复进群拉你进技术交流群
• 欢迎关注IQ前端，更多CSS/JS开发技巧只在公众号推送

上千种小程序模板，教你如何开发专属小程序

想自己搭建一个小程序又无从下手？那应该如何开发和运营自己的专属小程序呢？今天小编就从搭建小程序到运营小程序一体方法和工具分享给你，只要按照步骤操作，不用懂编程也能搭建和运营专属小程序！

首先找到本次讲解用到的工具，然后注册一个免费账号，就能登录到工具后台。

进入本次使用的工具平台，点击其中的【商城】选项，进入商城工具的后台中。

点击后台中的小程序商城选项，这样就可以找到本次需要使用的小程序商城模板。

在选择其中小程序模板时，只需点击一个模板，然后点击【马上替换】使用商城模板。

进入模板中，对需要修改的部分只需找到编辑按钮就能修改，例如图中编辑导航模板，在右侧的编辑栏就能进行设置。

在初次编辑和后期维护商城内的商品时，可以借助商城后台中的工具进行批量上架管理。

在对小程序模板中的基础部分完成编辑后，还可以使用左侧的编辑工具，将自己觉得需要添加功能和修改设计的商城内容进行编辑。

完成商城的搭建后，点击右上角的【保存并预览】就可以查看商城的上线效果。如图

最后扫码绑定，再将小程序商城进行上线发布就完成了。

以上就是小程序商城工具的使用教程，不用编程在线就能开发和维护小程序商城！只需几分钟就能掌握这个工具！

今天关于玩转喜茶微信小程序 教你如何花9.9元买3杯喜茶和买喜茶的小程序的讲解已经结束，谢谢您的阅读，如果想了解更多关于1 - 微信小程序开发 (安装软件和运行第一个微信小程序)、一杯喜茶的时间实战 Deno：Deno+MongoDB (内含项目 Demo 链接)、一杯喜茶的时间手搓Promise、上千种小程序模板，教你如何开发专属小程序的相关知识，请在本站搜索。

本文标签：

• 喜茶微信小程序
• 买喜茶优惠
• 9.9元三杯喜茶
• 喜茶折扣