原来你是这样的Promise

1. Promise简介

promise是异步编程的一种解决方案，它出现的初衷是为了解决回调地狱的问题。

打个比方，我需要：

--(延迟1s)--> 输出1 --(延迟2s)--> 输出2 --(延迟3s)--> 输出3

通常写法：

setTimeout(()=> {console.log('1');setTimeout(()=> {console.log('2');setTimeout(()=> {console.log('3'); }, 3000)}, 2000)
}, 1000)

这样的多重的嵌套的回调被称为回调地狱，这样的代码可读性很差，不利于理解。

如果用promise的话画风一转

function delay(time, num) {return new Promise((res, rej)=> {setTimeout(()=> {console.log(num);res();}, time*1000)});
}
delay(1, 1).then(()=> {return delay(2, 2);
}).then(()=> {delay(3, 3);
})
使用了promise的链式调用，代码结构更清晰。

是不是很棒？那还不赶快get起来~

2. Promise的使用

调用方式如下：

new Promise((resolve, reject)=> {if('some option') {resolve('some value');} else {reject('some error');}
}).then(val=> {// ...
    },error=> {// ...
    }
)

Promise构造函数接收一个函数型参数fn，fn有两个参数，分别是：resolve、reject，Promise还有一个Promise.prototype.then方法，该方法接收两个参数，分别是成功的回调函数succ和失败的回调函数error。

在fn中调用resolve会触发then中的succ回调，调用reject会触发error回调。

2.1 参数传递

  • 在fn内部调用resolve/reject传入的参数会作为相应参数传入相应的回调函数 
    new Promise((res, rej)=> {res('happy')
}).then(val=> {console.log(val);  // happy
});new Promise((res, rej)=> {rej('error!');
}).then(val=> {}, err=> {console.log(err);  // error!
});
  • 链式调用时若上一级没有传递值则默认为undefined 
    new Promise((res, rej)=> {res('a');    
}).then(val=> {return 'b'
}).then(val=> {console.log(val);  // 'b'
}).then((val)=> {console.log(val);  // 'undefined'
});
  • 若上一级的then中传递的并非函数，则忽略该级 
    new Promise((res, rej)=> {res('a');    
}).then(val=> {return 'b';
}).then(val=> {console.log(val);  // 'b'return 'c';
}).then({  // 并非函数name: 'lan'
}).then((val)=> {console.log(val);   // 'c'
});

2.2 参数传递例题

let doSomething = function() {return new Promise((resolve, reject) => {resolve('返回值');});
};let doSomethingElse = function() {return '新的值';
}doSomething().then(function () {return doSomethingElse();
}).then(resp => {console.warn(resp);console.warn('1 =========<');
});doSomething().then(function () {doSomethingElse();
}).then(resp => {console.warn(resp);console.warn('2 =========<');
});doSomething().then(doSomethingElse()).then(resp => {console.warn(resp);console.warn('3 =========<');
});doSomething().then(doSomethingElse).then(resp => {console.warn(resp);console.warn('4 =========<');
});

结合上面的讲解想一想会输出什么？（答案及解析）

3. Promise.prototype.then

当Promise中的状态(pending ---> resolved or rejected)发生变化时才会执行then方法。

  • 调用then返回的依旧是一个Promise实例 ( 所以才可以链式调用... )
new Promise((res, rej)=> {res('a');
}).then(val=> {return 'b';
});// 等同于
new Promise((res, rej)=> {res('a');
}).then(val=> {return new Promise((res, rej)=> {res('b');});
});
  • then中的回调总会异步执行
new Promise((res, rej)=> {console.log('a');res('');
}).then(()=> {console.log('b');
});
console.log('c');
// a c b
  • 如果你不在Promise的参数函数中调用resolve或者reject那么then方法永远不会被触发
new Promise((res, rej)=> {console.log('a'); 
}).then(()=> {console.log('b');
});
console.log('c'); 
// a c

4. Promise的静态方法

Promise还有四个静态方法，分别是resolve、reject、all、race，下面我们一一介绍一下。

4.1 Promise.resolve()

除了通过new Promise()的方式，我们还有两种创建Promise对象的方法，Promise.resolve()相当于创建了一个立即resolve的对象。如下两段代码作用相同：

Promise.resolve('a');new Promise((res, rej)=> {res('a');
});

当然根据传入的参数不同，Promise.resolve()也会做出不同的操作。

  • 参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

  • 参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。

let thenable = {then: function(resolve, reject) {resolve(42);}
};

Promise.resolve方法会将这个对象转为 Promise对象，然后就立即执行thenable对象的then方法。

  • 参数不是具有then方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。

  • 不带有任何参数

Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

值得注意的一点是该静态方法是在本次事件轮询结束前调用，而不是在下一次事件轮询开始时调用。关于事件轮询可以看这里——>JavaScript 运行机制详解：再谈Event Loop

4.2 Promise.reject()

和Promise.resolve()类似，只不过一个是触发成功的回调，一个是触发失败的回调

4.3 Promise.all()

Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

function asyncFun1() {return new Promise((res, rej)=> {setTimeout(()=> { res('a');}, 1000);}); 
}
function asyncFun2() {return new Promise((res, rej)=> {setTimeout(()=> { res('b');}, 1000);}); 
}
function asyncFun3() {return new Promise((res, rej)=> {setTimeout(()=> { res('c');}, 1000);}); 
}
Promise.all([asyncFun1(), asyncFun2(), asyncFun3()]).then((val)=> {console.log(val);
});
Promise.all([asyncFun1(), asyncFun2(), asyncFun3()]).then((val)=> {console.log(val);  // ['a', 'b', 'c']
});

用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据。

适用场景：打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

4.4 Promise.race()

race()和all相反，all()是数组中所有Promise都执行完毕就执行then，而race()是一旦有一个Promise执行完毕就会执行then()，用上面的三个Promise返回值函数举例

Promise.race([asyncFun1(), asyncFun2(), asyncFun3()]).then((val)=> {console.log(val);  // a
});

5. 链式调用经典例题

看了这么多关于Promise的知识，我们来做一道题巩固一下。

写一个类Man实现以下链式调用调用方式：
new Man('lan').sleep(3).eat('apple').sleep(5).eat('banana');

打印：
'hello, lan' -(等待3s)--> 'lan eat apple' -(等待5s)--> 'lan eat banana'

思路：

  • 在原型方法中返回this达到链式调用的目的
  • 等待3s执行的效果可以用Promise & then实现

具体实现如下：

class Man {constructor(name) {this.name = name;this.sayName();this.rope = Promise.resolve();  // 定义全局Promise作链式调用
    }sayName() {console.log(`hello, ${this.name}`);}sleep(time) {this.rope = this.rope.then(()=> {return new Promise((res, rej)=> {setTimeout(()=> {res();}, time*1000);});});return this;}eat(food) {this.rope = this.rope.then(()=> {console.log(`${this.name} eat ${food}`); });return this;}
}new Man('lan').sleep(3).eat('apple').sleep(5).eat('banana');

ok！不知道你有没有看懂呢？如果能完全理解代码那你的Promise可以通关了，顺便来个小思考,下面这种写法可以吗？和上面相比有什么区别？：

class Man1345 {constructor(name) {this.name = name;this.sayName(); }sayName() {console.log(`hello, ${this.name}`);}sleep(time) { this.rope = new Promise((res, rej)=> {setTimeout(()=> {res();}, time*1000);}); return this;}eat(food) {this.rope = this.rope.then(()=> { console.log(`${this.name} eat ${food}`);  });return this;}
}new Man('lan').sleep(3).eat('apple').sleep(5).eat('banana');

简单的说，第二段代码的执行结果是

'hello, lan' -(等待3s)--> 'lan eat apple' ---> 'lan eat banana'

为什么会出现这种差别？ 因为第二段代码每一次调用sleep都会new一个新的Promise对象，调用了两次sleep就new了两个Promise对象。这两个对象是异步并行执行，会造成两句eat同时显示。

和以下情况类似

var time1 = setTimeout(()=> {console.log('a');
}, 1000)
var time2 = setTimeout(()=> {console.log('b');
}, 1000)
// 同时输出 a b

抽象一点的讲解是：

// 第一段正确的代码的执行为
var p1 = new Promise().then('停顿3s').then('打印食物').then('停顿5s').then('打印食物');// 第二段代码的执行行为，p1、p2异步并行执行
var p1 = new Promise().then('停顿3s').then('打印食物');
var p2 = new Promise().then('停顿5s').then('打印食物');
总结

Promise的经常用到的地方：

  • 摆脱回调地狱
  • 多个异步任务同步

Promise是我们的好帮手，不过还有另一种方法也可以做到，那就是async&await，可以多多了解一下。

参考资料

ECMAScript 6 入门

通俗浅显的理解Promise中的then

大白话讲解promise

转载于:https://www.cnblogs.com/wind-lanyan/p/8849643.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/466140.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VS2015 vc++ 项目出现new.h找不到的错误

VS2015 vc++ 项目出现new.h找不到的错误

安装完 VS2015 后&#xff0c;直接新建项目->win32控制台->运行&#xff0c;结果报错&#xff01;"无法打开包括文件: “stdio.h”: No such file or directory”"lnk1104:无法打开文件 ucrtd.lib ”奇了怪了&#xff0c;stdio.h 和 ucrtd.lib 都是 VS 自带的头…
阅读更多...
C#——image与byte数组的转换

C#——image与byte数组的转换

image to byte[] MemoryStream msnew MemoryStream(); image.Save(ms,System.Drawing.Imaging.ImageFormat.Gif ); byte[] imagedatams.GetBuffer (); byte[] to imageMemoryStream ms new MemoryStream(imagedata);img Drawing.Image.FromStream(ms);转载于:https://www.cnb…
阅读更多...
Linux Select

Linux Select

Linux Select 在Linux中&#xff0c;我们可以使用select函数实现I/O端口的复用&#xff0c;传递给 select函数的参数会告诉内核&#xff1a; •我们所关心的文件描述符 •对每个描述符&#xff0c;我们所关心的状态。(我们是要想从一个文件描述符中读或者写&#xff0c;还…
阅读更多...
搞懂图像二值化算法

搞懂图像二值化算法

传统的机器视觉通常包括两个步骤&#xff1a;预处理和物体检测。而沟通二者的桥梁则是图像分割&#xff08;Image Segmentation&#xff09;[1]。图像分割通过简化或改变图像的表示形式&#xff0c;使得图像更易于分析。举个例子&#xff0c;食品加工厂新进了一批肉鸡&#xff…
阅读更多...
vs2015无法打开包括文件:“winapifamily.h”

vs2015无法打开包括文件:“winapifamily.h”

老项目是vs2003下的项目。升级vs2015后&#xff0c;调试运行报错 C:\Program Files (x86)\Windows Kits\8.0\Include\um\winsdkver.h(21): fatal error C1083: 无法打开包括文件:“winapifamily.h”: No such file or directory 在项目包含目录中包含了这个Windows Kits\8.0\…
阅读更多...
JavaWeb无限级分销结构分析

JavaWeb无限级分销结构分析

在现实生活中我们经常遇到由推荐人注册&#xff0c;比如一个购物平台,用户A推荐用户B注册&#xff0c;那当B购买商品成功时&#xff0c;用户A就会拿到相应的提成。只要是用户A推荐的用户购买商品成功后&#xff0c;A用户都会拿到提成。 当用户B推荐了用户C&#xff0c;那当用户…
阅读更多...
如何在Word里面自动生成目录

如何在Word里面自动生成目录

1、对整个文本进行排版处理&#xff1b; 2、先将第一个一级标题选中&#xff0c;再点击工具栏“字体”前“正文”的下拉菜单&#xff0c;选择“标题1”&#xff1b; 3、此时会在此行前出现一个黑点&#xff0c;表明此行已被设为目录项&#xff08;前方黑点不会被打印&#xff0…
阅读更多...
一个风骚的C语言操作

一个风骚的C语言操作

有个小伙伴在我们的嵌入式交流群里发了类似下面的一张图&#xff0c;顿时引起一阵骚动&#xff0c;我把源代码再附上&#xff0c;main.c 如下&#xff1a;#include <stdio.h> #include <string.h>static char city_name[][20] { #include "city.h" };in…
阅读更多...
VS2003升级VS2010修改

VS2003升级VS2010修改

BUG1: fatal error C1189: #error: MFC does not support WINVER less than 0x0601. Ple 在StdAfx.h中把#define WINVER 0X0500 //为 Windows98 和 Windows 2000 及更新版本改变为适当的值。改为&#xff1a; #define _WIN32_WINNT 0x0601 BUG2: https://www.cnblogs.com/slo…
阅读更多...
Linux poll

Linux poll

Linux poll poll提供的功能与select类似&#xff0c;不过在处理流设备时&#xff0c;它能够提供额外的信息。 1、函数原型#include <poll.h>int poll(struct pollfd fd[], nfds_t nfds, int timeout);2、函数参数&#xff1a;&#xff08;1&#xff09;fd&#xff1a;一个…
阅读更多...
SQL Server表分区-水平分区

SQL Server表分区-水平分区

SQL Server表分区&#xff0c;sql server水平分区 转自&#xff1a;http://www.cnblogs.com/knowledgesea/p/3696912.html 根据时间的&#xff0c;直接上T-SQL代码的水平分区&#xff1a;https://www.xuebuyuan.com/1817312.html?tdsourcetags_pcqq_aiomsg什么是表分区 一般情…
阅读更多...
jQuery1.3.2 源码学习 -2 两个重要的正则表达式

jQuery1.3.2 源码学习 -2 两个重要的正则表达式

32 // Is it a simple selector 33 isSimple /^.[^:#\[\.,]*$/ / / 表示这是正则表达式 ^ 表示开始部分 $ 表示结束部分 . 匹配除了 \n 之外的任何字符 [^character_group] 表示不在字符集合中 [^:#\[\.,] 表示除了冒号 (:), #, 前中括号([), 句号(.) 和逗号(,)之外的任何一个…
阅读更多...
基于STC89C52的韦根数据接收

基于STC89C52的韦根数据接收

韦根是一种开放的通讯协议&#xff0c;具体官方介绍如下&#xff1a;Wiegand协议是国际上统一的标准&#xff0c;有很多格式&#xff0c;标准的26-bit 应该是最常用的格式。此外&#xff0c;还有34-bit 、37-bit 等格式。格式的含义如下&#xff1a;当给出这一串数字&#xff0…
阅读更多...
头文件介绍

头文件介绍

头文件介绍 axftmp1.h 是收集类模板(MFC模板类)的头文件&#xff0c;倘若你在程序中用到了CArray, CObList等数据结构时&#xff0c;那么就得加载该文件。通常在MFC编程中&#xff0c;为了使用集合、数组类&#xff0c;要在StdAfx.h中加入下面语句&#xff1a;#include <afx…
阅读更多...
超乎想象，数据揭示自学成才的码农为何备受青睐

超乎想象，数据揭示自学成才的码农为何备受青睐

你是否想成为一个 Web 开发者&#xff0c;但却不知道从哪里开始&#xff1f; 你是否对学习编程语言的大量建议和繁琐细节感到审美疲劳&#xff1f; 你是否不确定需要遵循哪条路才能成为一个自信而又足智多谋的开发者&#xff1f; 如果你的回答是肯定的&#xff0c;那么不要担心…
阅读更多...
Linux epoll

Linux epoll

Linux epoll事件触发一、什么是epollepoll是什么&#xff1f;按照man手册的说法&#xff1a;是为处理大批量句柄而作了改进的poll。当然&#xff0c;这不是2.6内核才有的&#xff0c;它是在2.5.44内核中被引进的(epoll(4) is a new API introduced in Linuxkernel 2.5.44)&…
阅读更多...
Cisco 3层交换HSRP

Cisco 3层交换HSRP

现在3层交换机上:先把每一台交换机的vlan的ip配好在进入vlan (n)下在配<一>热备份的ip<二>配优先级(standby 加是第几组如1 priority 加优先级 如200)<三>占先权(standby 1 preempt)配置如下:假如你是vlan1ip routinginterface vlan 1standby 1 ip 192.168.1…
阅读更多...
Linux下的图形库curses写贪吃蛇，酷

Linux下的图形库curses写贪吃蛇，酷

最近看到大神在Linux下写的贪吃蛇代码&#xff0c;用到了curses图形库&#xff0c;可能很多人都没有用过&#xff0c;分享出来给大家。在ubuntu下安装curses图形库命令sudo apt-get install libncurses5-dev双buff是一个非常优秀的机制&#xff0c;之前写贪吃蛇的时候&#xff…
阅读更多...
BUG笔记

BUG笔记

1.无法打开lib 你这个 error LNK1104是链接时的错误&#xff0c;应该是需要此库&#xff0c;没办法忽略 找到此库 并在Properties->Linker->Input->Additional Depenncidees里加入库名 在Properties->Linker->General->Additional Library Directories里加入…
阅读更多...
STM32f103C8T6 bootloader设计

STM32f103C8T6 bootloader设计

STM32 bootloader设计 使用的是STM32f103C8T6&#xff1a;64Kflash&#xff0c;在应用程序中通过CAN把接受到的bin写到外置 flash的指定地址处。在bootloader中判断一个单独的标志位看程序是否需要升级&#xff0c;如果需要升级&#xff0c;则复制外置flash处的内容到STM32的内…
阅读更多...
最新文章

Copyright @ 2022~2023