万字详解JavaScript手写一个Promise

万字详解JavaScript手写一个Promise攻略

什么是Promise

Promise是一个JS的异步编程解决方案,对于那些需要等待其他代码执行完成(网络请求等)才可以执行的代码块提供了更好的控制方法。

Promise对象有三种状态: pending, resolve, reject。pending状态表示等待执行,resolve状态表示完成执行,而reject状态表示执行失败。

手写Promise实现

下面我们来手写一个Promise实现,此Promise有thencatch方法对完成状态与失败状态进行处理。

pseudo code:

var Promise = function (executor) {

  this.status = 'pending';
  this.value = null;
  this.reason = null;
  this.onFulfilledCallbacks = [];
  this.onRejectedCallbacks = [];

  var resolve = function (value) {
    if (this.status === 'pending') {
      this.status = 'fulfilled';
      this.value = value;
      this.onFulfilledCallbacks.forEach(function (callback) {
        callback();
      });
    }
  };

  var reject = function (reason) {
    if (this.status === 'pending') {
      this.status = 'rejected';
      this.reason = reason;
      this.onRejectedCallbacks.forEach(function (callback) {
        callback();
      });
    }
  };

  try {
    executor(resolve.bind(this), reject.bind(this));
  } catch (err) {
    reject.bind(this)(err);
  }
};

Promise.prototype.then = function (onFulfilled, onRejected) {
  if (this.status === 'pending') {
    var self = this;
    var promise = new Promise(function (resolve, reject) {
      self.onFulfilledCallbacks.push(function () {
        try {
          var result = onFulfilled(self.value);
          resolve(result);
        } catch (err) {
          reject(err);
        }
      });

      self.onRejectedCallbacks.push(function () {
        try {
          var reason = onRejected(self.reason);
          resolve(reason);
        } catch (err) {
          reject(err);
        }
      });
    });
  }

  if (this.status === 'fulfilled') {
    var promise = new Promise(function (resolve, reject) {
      try {
        var result = onFulfilled(this.value);
        resolve(result);
      } catch (err) {
        reject(err);
      }
    });
  }

  if (this.status === 'rejected') {
    var promise = new Promise(function (resolve, reject) {
      try {
        var reason = onRejected(this.reason);
        resolve(reason);
      } catch (err) {
        reject(err);
      }
    });
  }

  return promise;

};

Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected);
};

其中,我们定义了一个executor函数(这个函数会立马被执行),并需要通过该函数手写实现Promise对象的resolve,reject等方法和属性,以及then和catch方法。

Promise用例

下面来看一个使用手写Promise实现异步编程的例子,其中我们模拟了一个网络请求,若请求成功,则进行下一步处理并调用resolve方法,否则调用reject方法。

var request = new Promise(function(resolve, reject) {
  setTimeout(function() {
    var result = {
      status: 200,
      data: {
        message: 'Request has been successfully processed.'
      }
    };
    resolve(result);
  }, 1000);
});

request.then(function(response) {
  console.log(response.data.message);
  return response;
})
.then(function(response) {
  console.log('Request has been successfully handled.');
})
.catch(function(error) {
  console.log(error);
});

在上面的例子中,我们可以看到我们用request变量来接收手写Promise对象的实例,并在then方法里对成功状态进行处理,并对catch方法进行错误状态的处理。

再来看另外一个类似的例子,这里我们会尝试Promise.all方法,它可以让我们同时执行多个Promise对象,而且只有所有的Promise get resolve状态,才会执行all对应的回调。

var request1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('Request 1 is finished.');
  }, 1000);
});

var request2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('Request 2 is finished.');
  }, 2000);
});

var request3 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve('Request 3 is finished.');
  }, 3000);
});

Promise.all([request1, request2, request3])
  .then(function (responses) {
    responses.forEach(function (response) {
      console.log(response);
    });
    console.log('All requests are finished.');
  });

结语

以上是手写Promise实现的攻略以及部分应用场景,可能需要不断的添加对promise对象异步编程解决方案的理解和熟悉,来实现优质高效的代码逻辑。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:万字详解JavaScript手写一个Promise - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • JavaScript严格模式详解

    JavaScript严格模式详解 什么是JavaScript严格模式? JavaScript严格模式(Strict Mode),是一种更加安全和严谨的JavaScript编程模式。它主要的目的是消除Javascript语法的一些不合理、不严谨之处,减少与JavaScript引擎的冲突,并且对JavaScript中的一些不安全操作进行了限制。 当我们在开发中将…

    JavaScript 2023年6月10日
    00
  • JavaScript及jquey实现多个数组的合并操作

    首先,需要明确一点,JavaScript中合并多个数组可以通过Array.concat()方法来完成,例如: let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [7, 8, 9]; let mergedArray = arr1.concat(arr2, arr3); console.log(merg…

    JavaScript 2023年5月27日
    00
  • 每天一篇javascript学习小结(Array数组)

    下面我就来详细讲解“每天一篇javascript学习小结(Array数组)”的完整攻略。 一、介绍 本攻略旨在帮助初学者逐步深入了解javascript,重点介绍Array数组的相关内容。每天发布一篇小结,从基础到进阶,逐渐提高学习难度。 二、学习内容 常规操作:Array的创建、增删改查、遍历、排序等; 高阶函数:map、reduce、filter等; 扩…

    JavaScript 2023年6月1日
    00
  • 自己动手封装的 ajax

    请允许我为您详细讲解一下如何自己动手封装的 Ajax。 概述 Ajax 是一种使用异步技术实现网页无需刷新就能与服务器进行数据交互的技术。在开发实际项目中,我们可能会频繁使用到 Ajax 技术。而现成的库和框架往往过于笨重,我们可以自己动手封装一个轻量级的 Ajax。 原理 封装 Ajax 的原理也很简单,实际上就是利用原生的 XMLHttpRequest …

    JavaScript 2023年6月11日
    00
  • js 距离某一时间点时间是多少实现代码

    下面是完整的攻略: 前置知识 在实现“js 距离某一时间点时间是多少”之前,需要掌握以下知识: 获取当前时间的方法(如 Date.now()、new Date() 等) 将时间字符串转换为时间戳的方法(如 Date.parse()、new Date(str).getTime() 等) 时间戳的概念 计算时间差的方法(如使用 – 运算符,或者使用 Date 对…

    JavaScript 2023年5月27日
    00
  • javascript 文件的同步加载与异步加载实现原理

    JavaScript文件的同步加载与异步加载实现原理是前端开发中非常重要的知识点之一。本文将详细讲解该知识点的攻略,包括同步加载和异步加载的定义、原理、优缺点以及示例说明。 同步加载和异步加载的定义 同步加载指的是在浏览器加载JavaScript文件时,必须先下载并执行前面的JavaScript文件,后面才能执行后面的JavaScript文件。因此,同步加载…

    JavaScript 2023年5月27日
    00
  • javascript alert乱码的解决方法

    Javascript alert乱码的解决方法其实比较简单,主要就是需要提前设置网页的charset为UTF-8,接下来,我将详细说明如何进行解决,具体步骤如下: 设置charset为UTF-8 打开HTML文件或模板文件,添加以下代码到HTML文件头部,对于网站的每个页面都需要添加: <meta charset="UTF-8"&g…

    JavaScript 2023年5月19日
    00
  • js escape,unescape解决中文乱码问题的方法

    对于想要在 URL 参数中包含中文字符的情况,我们必须使用一些特殊的方法进行转义和解码,以确保字符不会在传输过程中被破坏。 一种常见的解决方案是使用 escape 和 unescape 函数进行转义和解码,它们是 JavaScript 中的内置函数,可以直接使用。它们可以将任何字符转义为 %XX 格式,其中 XX 是字符的 ASCII 码的十六进制表示。例如…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部