浅析Promise原理

最新推荐文章于 2023-07-10 14:19:51 发布

原创最新推荐文章于 2023-07-10 14:19:51 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#promise

JavaScirpt 专栏收录该内容

43 篇文章

订阅专栏

本文深入解析Promise构造函数的实现原理，包括其内部状态管理、回调机制及如何通过executor函数执行异步操作。同时，探讨了Promise原型上的方法如catch、finally、then等，以及Promise构造函数提供的静态方法如all、race等。

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

Promise原型对象

在浏览器控制台输入如下代码，可以看到Promise原型对象信息。

var p = new Promise(()=>{});
console.log(p)

Promise原型上有catch、finally、then等方法。同时Promise内部维护了两个属性值status和value

Promise构造方法

再看Promise的构造方法，如下图
在这里插入图片描述
构造函数有all、allSettled、finally、race、reject、resolve等方法。

简单实现

构造函数实现总结：

构造函数接受一个函数executor，并立即执行；
executor函数接受两个参数，一个是resolve函数，一个是rejected函数，用于后续回调执行；
promise对象的then方法中的第一个参数（函数）是状态变为fulfilled时的回调。
resolve函数被调用时，会触发then方法中的回调函数的指定。

const PENDING = 'pending';
const FULFILLED = 'fullfilled';
const REJECTED = 'rejected';
function Promise(executor) {
  this.status = PENDING;
  this.value = undefined;

  this.onResolvedCallback = []; //成功状态下的回调函数集合
  this.onRejectedCallback = [];

  function resolve(value) {
  };
  
  function reject() {
  };
  
  executor(resolve, reject);
}

const PENDING = 'pending';
const FULFILLED = 'fullfilled';
const REJECTED = 'rejected';
function Promise(executor) {
  this.status = PENDING;
  this.value = undefined;

  this.onResolvedCallback = []; //成功状态下的回调函数集合
  this.onRejectedCallback = [];

  function resolve(value) {
    if(this.status === PENDING) {
      this.status = FULFILLED;
      this.value = value;
      // 触发后续then方法中的回调方法执行
      onRejectedCallback.forEach(onResolved => {
        onResolved(value)
      });
    }
  };
  
  function reject() {
  };
  
  try { // 考虑到执行executor的过程中有可能出错，所以我们用try/catch块给包起来，并且在出错后以catch到的值reject掉这个Promise
    executor(resolve, reject) // 执行executor
  } catch(e) {
    reject(e)
  }
}
``