[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

本文主要是介绍[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js jade express mongodb mongoose promise实现todolist,本文就来讲解下promise的常见用法.

为什么会有promise,他的作用是什么?

promise主要是为了解决js中多个异步回调难以维护和控制的问题.

什么是promise?

从图中,我们可以看出,Promise是一个函数,这个函数上有在项目中常用的静态方法:all, race, reject,resolve等,原型对象上有有catch, then等方法.也就是说,如果要调用catch和then方法,需要一个Promise的实例( new Promise ), 而静态方法可以用函数本身调用,如:Promise.all, Promise.race等,好了,至此,至少知道Promise是什么,但是还是不知道怎么用他提供的方法,接下来我们从一个需求开始,在javascript中,经常有这样的需求:

1,页面上有一个按钮,一个ul,点击按钮的时候,每隔1秒钟向ul的后面追加一个li, 一共追加10个,li的内容从0开始技术( 0, 1, 2, ....9 ),这个在我的博客文章中,出现好几次

2,每隔1秒钟输出递增的数字,如( 1, 2, 3, 4, 5 等 )

3,红绿灯( 红->(等2秒)->绿( 等2秒 )->黄( 等2秒 ) -> 红等,如此循环下去

4,node.js中的爬虫,爬文章url->爬文章内容->爬文章url->爬文章内容

好了,太多这类应用了,这类应用叫做异步回调( 执行完一件事,才能接着往下执行),如果出现多次,就会产生多层嵌套( 回调地狱 ),维护和控制异步过程非常的麻烦和困难,如:

每隔1秒钟输出递增的数字,如( 1, 2, 3 等 )

1 setTimeout(function () {
2     console.log(1);
3     setTimeout(function () {
4         console.log(2);
5         setTimeout(function () {
6             console.log(3);
7         }, 1000);
8     }, 1000);
9 }, 1000);

这还是3层,如果4层,5层。。。。,现在代码简单,可能感觉不到,如果console.log换成具体的业务逻辑,那就不得了,假如每个真实的业务逻辑有100行代码,5层嵌套。而业务逻辑中又有很多的嵌套匹配。你能想象吗?如果由于业务需求需要 调换业务的执行顺序?是不是很头疼?不用担心,Promise可以帮你非常灵活的调整:

 1 function next( n ){
 2     return new Promise( function( resolve, reject ){
 3         setTimeout( function(){
 4             resolve( n );
 5         }, 1000 );
 6     } );
 7 }
 8 next( 1 ).then( function( res ){
 9     console.log( res );
10     return next( 2 );
11 } ).then( function( res ){
12     console.log( res );
13     return next( 3 );
14 } ).then( function( res ){
15     console.log( res );
16 } )

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。按照标准来讲,其实resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected,promise的常用用法.

一般是用一个函数嵌套,返回一个promise对象,为什么这么用?

因为then,catch方法需要一个Promise实例,才能把多个异步执行的操作,根据resolve和reject的执行状态一层层往下执行.

当我们执行next( 1 )的时候,在next函数中返回一个promise对象,一秒钟之后,通过resolve把n( 就是 1 )传递给then方法的第一个function,参数res就是resolve传递过来的数据,所以1秒钟后输出1,紧接着我在return next( 2 ),这个时候又调用了一次Promise对象,一秒钟后,通过resolve把n ( 就是 2 )传递给下一个then方法的第一个function, 参数res就收到n( 2 )的值,所以1秒钟后输出2。。。下面输出3的过程跟刚才分析的一样,有一点一定要注意,在then方法中的function 调用的next方法,一定要用return ,否则不会通过resolve把数据往下传递( 通俗点讲就是下一个异步操作,接收不到上一步的结果 ).

then中的function也可以return一个值,把一个值往下传递

 1 function next( n ){
 2     return new Promise( function( resolve, reject ){
 3         setTimeout( function(){
 4             resolve( n );
 5         }, 1000 );
 6     } );
 7 }
 8 next( 1 ).then( function( res ){
 9     console.log( res );
10     return 2;
11 } ).then( function( res ){
12     console.log( res );
13     return 3;
14 } ).then( function( res ){
15     console.log( res );
16 } )

reject是把数据传递给then方法的第二个function处理,then方法可以接收2个参数

 1 function next(){
 2     return new Promise( function( resolve, reject ){
 3         var num = Math.floor( Math.random() * 10 );
 4         if ( num <= 5 ) {
 5             resolve( num );
 6         }else {
 7             reject( new Error() );
 8         }
 9     } );
10 }
11 next( 1 ).then( function( res ){
12     console.log( res );
13 }, function( res ){
14     console.log( res );
15 } );
16 console.log( '正常执行' );

当随机数大于等于6的时候,我把一个错误往下抛,然后在then的第二个参数接收到,整个程序还是能够正常运行.

catch也是接收reject传递的数据

 1 function next(){
 2     return new Promise( function( resolve, reject ){
 3         var num = Math.floor( Math.random() * 10 );
 4         if ( num <= 5 ) {
 5             resolve( num );
 6         }else {
 7             reject( new Error() );
 8         }
 9     } );
10 }
11 next( 1 ).then( function( res ){
12     console.log( res );
13 } ).catch( function( res ){
14     console.log( 'reject:'   res );
15 } );
16 console.log( '正常执行' );

Promise.all是等所有的异步资源都加载完毕之后,再执行代码,比如。页面有很多的插件库,一般都是要加载完毕之后,才能有特效效果。Promise.all主要解决的是多个异步模块的依赖问题,必须等大家都加载完毕之后,才执行( 说白了,就是等最慢的那个异步操作执行完了,再打印出结果 )

 1 var count = 0;
 2 function next() {
 3     return new Promise(function (resolve, reject) {
 4         var num = Math.floor(Math.random() * 10);
 5         setTimeout( function(){
 6             console.log( num );
 7             resolve( `第${  count}随机到的值是${num}`);
 8         }, 2000 );
 9     });
10 }
11 Promise.all( [ next(), next(), next() ] ).then( function( res ){
12     console.log( res );
13 } );

三个next()异步操作执行完毕之后,才会一起把他们的resolve结果打印出来

Promise.race,只要最快的异步执行完毕之后,就执行then,不会等待其他的异步操作

 

Promise还有其他的用法,在项目中,这些是比较常用到的

这篇关于[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076910

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

MySQL字符串常用函数详解

《MySQL字符串常用函数详解》本文给大家介绍MySQL字符串常用函数,本文结合实例代码给大家介绍的非常详细,对大家学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql字符串常用函数一、获取二、大小写转换三、拼接四、截取五、比较、反转、替换六、去空白、填充MySQL字符串常用函数一、

Java中Arrays类和Collections类常用方法示例详解

《Java中Arrays类和Collections类常用方法示例详解》本文总结了Java中Arrays和Collections类的常用方法,涵盖数组填充、排序、搜索、复制、列表转换等操作,帮助开发者高... 目录Arrays.fill()相关用法Arrays.toString()Arrays.sort()A

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

MySQL 主从复制部署及验证(示例详解)

《MySQL主从复制部署及验证(示例详解)》本文介绍MySQL主从复制部署步骤及学校管理数据库创建脚本,包含表结构设计、示例数据插入和查询语句,用于验证主从同步功能,感兴趣的朋友一起看看吧... 目录mysql 主从复制部署指南部署步骤1.环境准备2. 主服务器配置3. 创建复制用户4. 获取主服务器状态5

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Windows环境下解决Matplotlib中文字体显示问题的详细教程

《Windows环境下解决Matplotlib中文字体显示问题的详细教程》本文详细介绍了在Windows下解决Matplotlib中文显示问题的方法,包括安装字体、更新缓存、配置文件设置及编码調整,并... 目录引言问题分析解决方案详解1. 检查系统已安装字体2. 手动添加中文字体(以SimHei为例)步骤

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更