带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(3)

简介: 带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(3)

带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(2)https://developer.aliyun.com/article/1349506?groupCode=tech_library


步骤 5: 处理 Promise 状态转换和回调执行

我们需要在 then 方法中处理 Promise 的状态转换和回调的执行。根据当前 Promise 的状态,我们可以立即执行回调函数或将回调函数添加到相应的回调数组中。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  var self = this;
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function(value) { return value; };
  onRejected = typeof onRejected === 'function' ? onRejected : function(reason) { throw reason; };
  var newPromise = new MyPromise(function(resolve, reject) {
    function handleFulfilled(value) {
      try {
        var x = onFulfilled(value);
        resolvePromise(newPromise, x, resolve, reject);
      } catch (e) {
        reject(e);
      }
    }
    function handleRejected(reason) {
      try {
        var x = onRejected(reason);
        resolvePromise(newPromise, x, resolve, reject);
      } catch (e) {
        reject(e);
      }
    }
    if (self.state === 'fulfilled') {
      setTimeout(function() {
        handleFulfilled(self.value);
      }, 0);
    } else if (self.state === 'rejected') {
      setTimeout(function() {
        handleRejected(self.reason);
      }, 0);
    } else if (self.state === 'pending') {
      self.onFulfilledCallbacks.push(function(value) {
        setTimeout(function() {
          handleFulfilled(value);
        }, 0);
      });
      self.onRejectedCallbacks.push(function(reason) {
        setTimeout(function() {
          handleRejected(reason);
        }, 0);
      });
    }
  });
  return newPromise;};

步骤 6: 解析 Promise

最后,我们需要实现 resolvePromise 函数,用于解析 Promise。它会处理 thenable 和非 thenable 值,并根据其状态执行相应的处理。

function resolvePromise(promise, x, resolve, reject) {
  if (promise === x) {
    reject(new TypeError('Circular reference detected.'));
  }
  if (x && typeof x === 'object' || typeof x === 'function') {
    var called = false;
    try {
      var then = x.then;
      if (typeof then === 'function') {
        then.call(
          x,
          function(y) {
            if (!called) {
              called = true;
              resolvePromise(promise, y, resolve, reject);
            }
          },
          function(r) {
            if (!called) {
              called = true;
              reject(r);
            }
          }
        );
      } else {
        resolve(x);
      }
    } catch (e) {
      if (!called) {
        called = true;
        reject(e);
      }
    }
  } else {
    resolve(x);
  }}


带你读《现代Javascript高级教程》二十七、实现符合Promise/A+规范的Promise(4)https://developer.aliyun.com/article/1349504?groupCode=tech_library

相关文章
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) => { setTimeout(resolve, 2000, '成功'); }).then(console.log); // 输出: 成功
86 4
|
2月前
|
消息中间件 存储 前端开发
「3.4w字」超保姆级教程带你实现Promise的核心功能
该文章通过详细的步骤和示例代码,逐步介绍了如何从零开始实现一个符合ECMAScript标准的Promise对象,涵盖了Promise的基本使用、状态管理、链式调用、错误处理机制及Promise.all和Promise.resolve等方法的实现。
「3.4w字」超保姆级教程带你实现Promise的核心功能
|
6月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
89 0
|
3月前
|
JavaScript 前端开发
js点击抽奖符合条件触发点击次数
js点击抽奖符合条件触发点击次数
33 1
|
5月前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
58 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
4月前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
4月前
|
前端开发 JavaScript 定位技术
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
JavaScript 等待异步请求数据返回值后,继续执行代码 —— async await Promise的使用方法
54 1
|
5月前
|
前端开发 JavaScript
Promise是JavaScript解决异步问题的构造器,代表未来的不确定值。
【6月更文挑战第27天】Promise是JavaScript解决异步问题的构造器,代表未来的不确定值。它避免了回调地狱,通过链式调用`.then()`和`.catch()`使异步流程清晰。
48 2
|
5月前
|
前端开发 JavaScript
JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。
【6月更文挑战第22天】JavaScript异步处理避免了单线程阻塞,如回调函数、Promise和async/await。回调是基础,用于在操作完成后执行函数;Promise管理异步状态,支持链式调用;async/await提供同步代码外观,简化错误处理。每种技术在处理耗时任务时都起着关键作用。
48 3
|
5月前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程:Promise与Async/Await
在现代前端开发中,JavaScript的异步编程变得越来越重要。本文将深入探讨JavaScript中的两种常见异步编程方式:Promise和Async/Await,并比较它们之间的优劣势,帮助读者更好地理解和运用这些技术。