首页 / JAVASCRIPT / 使用Js实现Promise库

使用Js实现Promise库

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用Js实现Promise库，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5984字，纯文字阅读大概需要9分钟。

内容图文

这次给大家带来使用Js实现Promise库，使用Js实现Promise库的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

ECMAScript 是 JavaScript 语言的国际标准，JavaScript 是 ECMAScript 的实现。ES6 的目标，是使得 JavaScript 语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。

概念

ES6 原生提供了 Promise 对象。

所谓 Promise，就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

三道思考题

刚开始写前端的时候，处理异步请求经常用callback，简单又顺手。后来写着写着就抛弃了callback，开始用promise来处理异步问题。promise写起来确实更加优美，但由于缺乏对它内部结构的深刻认识，每次在遇到一些复杂的情况时，promise用起来总是不那么得心应手，debug也得搞半天。

所以，这篇文章我会带大家从零开始，手写一个基本能用的promise。跟着我写下来以后，你会对promise是什么以及它的内部结构有一个清楚的认知，未来在复杂场景下使用promise也能如鱼得水。

而且，为了检验大家是否真的完全掌握了promise，我会在文章结尾出几道跟promise相关的练习题。说是练习题，其实都是大家项目中会遇到的真实场景的抽象，熟练掌握可以帮助大家在前端方面更上一层楼。

提前将三道练习题给出来，大家可以先不看下文的内容，在脑海里大概构思下你会怎么解决：

promise array的链式调用？
promise怎么做并发控制？
promise怎么做异步缓存？

以上三道思考题其实跟你用不用promise并没有多大关系，但是如果你不深刻理解promise想要解决这三个问题还真不是那么轻松的。

什么是Promise

回到正文，什么是Promise？说白了，promise就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

首先，ES6规定Promise对象是一个构造函数，用来生成Promise实例。然后，这个构造函数接受一个函数(executor)作为参数，该函数的两个参数分别是resolve和reject。最后，Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数(onFulfilled和onRejected)。

具体的使用方法，用代码表现是这样：

const promise = new Promise(function(resolve, reject) {
 // ... some code
 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});
promise.then(function(value) {
 // success
}, function(error) {
 // failure
});

理解了这个后，我们就可以大胆的开始构造我们自己的promise了，我们给它取个名字：CutePromise

实现一个Promise：CutePromise

我们直接用ES6的class来创建我们的CutePromise，对ES6语法还不熟悉的，可以先读一下我的另外两篇介绍ES6核心语法的文章后再回来。30分钟掌握ES6/ES2015核心内容（上）、30分钟掌握ES6/ES2015核心内容（下）

class CutePromise {
 // executor是我们实例化CutePromise时传入的参数函数，它接受两个参数，分别是resolve和reject。
 // resolve和reject我们将会定义在constructor当中，供executor在执行的时候调用
 constructor(executor) {
 const resolve = () => {}
 const reject = () => {}
 executor(resolve, reject)
 }
 // 为实例提供一个then的方法，接收两个参数函数，
 // 第一个参数函数必传，它会在promise已成功(fulfilled)以后被调用
 // 第二个参数非必传，它会在promise已失败(rejected)以后被调用
 then(onFulfilled, onRejected) {}
}

创建了我们的CutePromise后，我们再来搞清楚一个关键点：Promise 对象的状态。

Promise 对象通过自身的状态，来控制异步操作。一个Promise 实例具有三种状态：

异步操作未完成（pending）
异步操作成功（fulfilled）
异步操作失败（rejected）

上面三种状态里面，fulfilled和rejected合在一起称为resolved（已定型）。状态的切换只有两条路径：第一种是从pending=>fulfilled，另一种是从pending=>rejected，状态一旦切换就不能再改变。

现在我们来为CutePromise添加状态，大概流程就是：

首先，实例化初始过程中，我们先将状态设为PENDING，然后当executor执行resolve的时候，将状态更改为FULFILLED，当executor执行reject的时候将状态更改为REJECTED。同时更新实例的value。

constructor(executor) {
 ...
 this.state = 'PENDING';
 ...
 const resolve = (result) => {
  this.state = 'FULFILLED';
  this.value = result;
 }
 const reject = (error) => {
  this.state = 'REJECTED';
  this.value = error;
 }
 ...
}

再来看下我们的then函数。then函数的两个参数，onFulfilled表示当promise异步操作成功时调用的函数，onRejected表示当promise异步操作失败时调用的函数。假如我们调用then的时候，promise已经执行完成了（当任务是个同步任务时），我们可以直接根据实例的状态来执行相应的函数。假如promise的状态还是PENDING, 那我们就将onFulfilled和onRejected直接存储到chained这个变量当中，等promise执行完再调用。

constructor(executor) {
 ...
 this.state = 'PENDING';
 
 // chained用来储存promise执行完成以后，需要被依次调用的一系列函数
 this.chained = [];
 const resolve = (result) => {
  this.state = 'FULFILLED';
  this.value = result;
  
  // promise已经执行成功了，可以依次调用.then()函数里的onFulfilled函数了
  for (const { onFulfilled } of this.chained) {
   onFulfilled(res);
  }
 }
 ...
}
then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
 onFulfilled(this.value);
 } else if (this.state === 'REJECTED') {
 onRejected(this.value);
 } else {
 this.$chained.push({ onFulfilled, onRejected });
 }
}

这样我们就完成了一个CutePromise的创建，下面是完整代码，大家可以到控制台测试一下：

class CutePromise {
 constructor(executor) {
 if (typeof executor !== 'function') {
  throw new Error('Executor must be a function');
 }
 this.state = 'PENDING';
 this.chained = [];
 const resolve = res => {
  if (this.state !== 'PENDING') {
  return;
  }
  this.state = 'FULFILLED';
  this.internalValue = res;
  for (const { onFulfilled } of this.chained) {
  onFulfilled(res);
  }
 };
 const reject = err => {
  if (this.state !== 'PENDING') {
  return;
  }
  this.state = 'REJECTED';
  this.internalValue = err;
  for (const { onRejected } of this.chained) {
  onRejected(err);
  }
 };
 try {
  executor(resolve, reject);
 } catch (err) {
  reject(err);
 }
 }
 
 then(onFulfilled, onRejected) {
 if (this.state === 'FULFILLED') {
  onFulfilled(this.internalValue);
 } else if (this.$state === 'REJECTED') {
  onRejected(this.internalValue);
 } else {
  this.chained.push({ onFulfilled, onRejected });
 }
 }
}

提供一下测试代码：

let p = new CutePromise(resolve => {
 setTimeout(() => resolve('Hello'), 100);
});
p.then(res => console.log(res));
p = new CutePromise((resolve, reject) => {
 setTimeout(() => reject(new Error('woops')), 100);
});
p.then(() => {}, err => console.log('Async error:', err.stack));
p = new CutePromise(() => { throw new Error('woops'); });
p.then(() => {}, err => console.log('Sync error:', err.stack));

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的使用Js实现Promise库全部内容，希望文章能够帮你解决使用Js实现Promise库所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/287736.html

来源：【匿名】

【上一篇】怎样操作JS读取xml内容并输出到div内【下一篇】javascript 怎么调用php方法

更多 ►

【使用Js实现Promise库】教程文章相关的互联网学习教程文章

通过一道笔试题浅谈javascript中的promise对象【代码】

因为前几天做了一个promise对象捕获错误的面试题目，所以这几天又重温了一下promise对象。现在借这道题来分享下一些很基础的知识点。下面是一个面试题目，三个promise对象捕获错误的例子，返回结果有什么不同。 //使用throw添加错误事件var p = new Promise(function(resolve, reject) {resolve("ok");thrownew Error(‘error0‘);//setTimeout(function() { throw new Error(‘error1‘) }, 0);}); p.then(function(value){consol...

JavaScript 的 Async\/Await 完胜 Promise 的六【代码】

参考：http://www.10tiao.com/html/558/201705/2650964601/1.htmlNode 现在从版本 7.6 开始就支持 async/await 了。简介：Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。Async/await 像 promise 一样，也是非阻塞的。Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。语法：假设函...

JavaScript及其异步实现续:Promise让一切更简单【图】

在写这篇文章之前，我参考了以下文章。所以我文中的例子都是精准的，而且有循可依。下面抛出例子的链接： Understanding JQuery.Deferred and PromiseDeferred and promise in jQueryEdit:在翻网站的时候，看到腾讯技术团队居然也刚写了一篇Promise的文章，加下链接，以作备忘。JavaScript Promise启示录Deferred在JQuery1.5的版本被引进，这项功能的引进使JQuery变得更加强大，良好的异步支持，让书写异步JS变得简单轻松，而且...

Javascript的事件模型和Promise实现【代码】

1. Javascript的运行时模型——事件循环 JS的运行时是个单线程的运行时，它不像其他编程语言，比如C++，Java，C#这些可以进行多线程操作的语言。当它执行一个函数时，它只会一条路走到黑，不会在当前函数结束之前去调用其他的函数（除非当前函数主动调用其他函数）。它也不用担心会有其他线程打扰它，因为它的运行时只有一个线程。如果你还记得一些计算机原理的话，这种运行时只有一个栈，设计起来相当的简单。一条路走到黑的设计很...

javaScript Promise 入门【代码】【图】

Promise是JavaScript的异步编程模式，为繁重的异步回调带来了福音。一直以来,JavaScript处理异步都是以callback的方式，假设需要进行一个异步队列，执行起来如下：animate (ball1, 100, function () {animate (ball2, 200, function () {animate (ball3, 300, function () {animate (ball3, 150, function () {animate (ball2, 150, function () {animate (ball1, 150, function () {// do something})})})})})这就是所谓的回调金字...

你不知道的JavaScript--Item34 大白话讲解Promise【代码】【图】

去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。ES6 Promise 先拉出来遛遛一、Promise小试复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？别猜了，直接打印出来看看吧，console.dir(Pr...

Javascript Promises 介绍【代码】【图】

什么是 PromisesPromises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。传统的回调函数说到JavaScript的异步编程处理，通常我们会想到回调函数，如下面的代码：getFileAsync("1.txt", function(error, result){if(error){throw error;}// 取得成功时的处理 });上面的代码定义了一个获取文件内容的函数，读取完成后回调用传入的回调函数，对于下面的场景：－读取文件 1.tx...

js-20170830-Promise对象

1. 简介Promise 对象是 CommonJS 工作组提出的一种规范，目的是为异步操作提供统一接口.首先，它是一个对象，其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。简单说，它的思想是，每一个异步任务立刻返回一个Promise对象，由于是立刻返回，所以可以采用同步操作的流程。这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。 2. Promise接口Promise对象只有三种状态。异步操作“未完成”...

JS 异步系列 —— Promise 札记【代码】

Promise研究 Promise 的动机大体有以下几点：对其 api 的不熟悉以及对实现机制的好奇;很多库(比如 fetch)是基于 Promise 封装的，那么要了解这些库的前置条件得先熟悉 Promise;要了解其它更为高级的异步操作得先熟悉 Promise;基于这些目的，实践了一个符合 Promise/A+ 规范的 repromise。本札记系列总共三篇文章，作为之前的文章 Node.js 异步异闻录的拆分和矫正。Promise札记Generator札记Async札记Promise/A+ 核心在实现一个符合...

浅谈JavaScript中的对象及Promise对象的实现【代码】

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数。下面小编给大家收集整理些javascript中的对象及promise对象的实现。具体内容如下：到处都是对象window对象常用的属性和方法介绍location　　包含页面的URL，如果改变这个属性，浏览器会访问新的URLstatus　　包含将在浏览器状态去显示的一个串。一般在浏览器左下角onload：　　包含了需要在页面完全加载后调用的函数document：　　包含DOMalert方法：　　显示一个提醒...

js使用Promise实现简单的Ajax缓存

业务场景在不少业务场景下，我们需要实现简单的请求缓存(即某个请求只发起一次请求)，例如上传 Token 的获取、获取配置的接口等。这些接口可以通过 Promise 实现简单的缓存并能够控制更新，而不需要另外引入缓存层。示范代码用七牛上传作例子，一般我们会把七牛上传封装为一个单独的 Upload 组件，外部只需要调用组件，而 token 的获取封装到组件内部实现。 //Upload.vue let fetchToken = null; export default {data() {return...

javascript-Request-Promise：不要承诺缓存结果【代码】

我正在使用Request-Promise(请参见下面的代码). 问题：如果我缓存了一个诺言,它会缓存结果还是每次都问一个新的诺言？例：var cachedPromise = getTokenPromise(); cachedPromise.then(function(authorizationToken1) {//... }); cachedPromise.then(function(authorizationToken2) {//... }); //QUESTION: Is right that authorizationToken1 equals authorizationToken2getTokenPromise()函数：var querystring = require('quer...

利用Promise自定义一个GET请求的函数示例代码

写在最前面近期 review 自己以前的代码的时候，看到 promise 的使用方法，用的比较模糊。含义不清，用法凌乱，这里重新温习一下基础知识。前言 JavaScript 是单线程工作，但是浏览器是多线程的。为了更好的完成我们程序的任务。Promise 异步的操作就由此诞生了。一个 Promise 就是一个代表了异步操作最终完成或者失败的结果对象。怎么使用？语法基本 new Promise( function(resolve, reject) {...} /* executor */ );Promise 构...

javascript – 在promise解析后修改组件状态【代码】

我希望在解析promise之后修改组件的状态(本机反应). 这是我的代码：class Greeting extends Component{constructor(props){super(props);this.state = {text: 'Starting...'};var handler = new RequestHandler();handler.login('email','password').then(function(resp){this.setState({text:resp});});}render(){return (<Text style={this.props.style}>Resp: {this.state.text}</Text>);} }但是当promise解决时,它会抛出以下错...

js利用递归与promise 按顺序请求数据的方法【图】

问题：项目中有一个需求，一个tabBar下面如果没有内容就不让该tabBar显示，当然至于有没有内容，需要我们通过请求的来判断，但是由于请求是异步的，如何让请求按照tabBar的顺序进行？方案：我们可以将promise变成下一个请求，可以利用递归来实现实施： //定义初始数据 requestlist就像tabBar列表let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9];//每个tabBar的返回数据使用reslist装起来let reslist = [];function startapi() {//定...

首页 / JAVASCRIPT / 使用Js实现Promise库

使用Js实现Promise库

内容导读

内容图文

内容总结

内容备注

内容手机端

【使用Js实现Promise库】教程文章相关的互联网学习教程文章

PROMISE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程