关于promise的一些问题和理解（一）

最新推荐文章于 2024-11-14 15:41:57 发布

FuChenRenShen

最新推荐文章于 2024-11-14 15:41:57 发布

阅读量384

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/FuChenRenShen/article/details/107493225

版权

js 专栏收录该内容

2 篇文章

订阅专栏

本文主要探讨Promise中的then方法，重点在于分析then方法的内部机制和如何根据前一个promise的状态来决定调用onFulfilled还是onRejected。虽然Promise有助于解决回调地狱并提供优雅的代码书写方式，但其语义化不明确和错误捕获等问题也在讨论范围内。在then方法中，返回的可以是普通类型、thenable对象或新的promise，这决定了后续链式调用的行为。下篇将继续讲解不同返回值对then链的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，对于找工作是忙的焦头烂额，再加上觉得自己有许多不足，只能一一补齐，心力交瘁

对于promise，我从18年就听过，也曾片段学习过，奈何总是抓不到重点，你要是和我讲callback，我倒是能理解

简单来说，就是传名，传引用。

复杂点说，就是我定义了操作的内容和行为，交给你，你要按照我的要求把东西带齐了，再来告诉我

如果code来说呢，简单表示如下

function b(executor) {
    executor('content1', 'content2');
}

function a(content1, content2) {
    console.log('都准备齐了');
};

b(a);

更仔细来说，就是某个对象接收的是一个做事的标准（这个标准由自己来定义），然后按照标准做好事

许多人都说promise做了两件事

1.解决了“callback hell”的问题

2.更优雅的书写方式

但是也有人说，其实promise也存在着很多问题，比如

语义化不明显，捕获错误的问题

其实在一般的开发中，这些问题并不那么明显，比如我，很少去纠结，就是因为用的不那么多

那么我接下来想要总结的自然就不包括这些了！

研究promise少不了研究源码，而源码实现又是基于规范 -> Promise A+

而其中有着许许多多的限制，在个人看来，其中复杂的部分是在then方法的设定中

所以本章节主要针对then方法的情况进行剖析（promise本身基础概念这里也不会涉及）

首先：

1.then需要返回一个promise对象

2.then接收1-2个参数, onFullfilled [，onRejected]，后者不一定要写

3.onFullfilled方法中可以返回一下3种类型

1).普通类型（即基本数据类型或者单纯的引用类型）

2).thenable对象，即个人认为具有then方法的对象

3).promise对象

第一点好理解：内部返回promise对象即可，噢，对了，还需要记住一点，then中返回的对象的状态皆由前一个promise决定

因此，在then方法中会根据前promise对象的状态（PENDING / RESOLVED / REJECTED）来决定调用onFullfilled还是onRejected，还是什么都不调用

例如（纯手打）：

function Promise(executor) {
    let self = this;
    self.value = 0;
    self.reason = '';
    self.status = 'PENDING';

    function resolve(value) {
        // ...
    }

    function reject(reason) {
        // ...
    }

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

Promise.prototype.then = function(onFullfilled, onRejected) {
    // 判断onFullfilled/onRejected格式
    let self = this;
    return new Promise((res, rej) => {
        if(this.status == 'PENDING') {
            // ...
        }else if(this.status == 'RESOLVED') {
            // ...
        }else if(this.status == 'REJECTED') {
            // ...
        }
    });
}

new Promise((res, rej) => { res(1); }).then(_ => console.log(_));
// 1

同时呢，由于调用的是then中新生成的promise对象的resolve/reject方法来做的，那么等于将结果修改到自己本身了，那么下次再调用then，又可以按照这个顺序来了，这也就是为什么可以链式调用then的原因！

文章内容可能较多，因此拆分两个章节，下章讲解then中回调函数接收不同值所产生的不同结果！