浅谈es6 promise
本文是借鉴于ac黄的博客。
接触es6也有几个月了,貌似没有系统的去学习过它,总是用到什么,查查什么。今天就说下es6中的promise对象。
先说说promise解决了什么问题?
写前端的同学都经常遇到这种问题:在多个接口异步请求数据,然后利用这些数据来进行一系列的操作。一般如下实现:
$.ajax({url: '......',success: function (data) { //基于data,才能进行下发操作$.ajax({url: '......',success: function (data) {// ......}});}
});
这样写会导致两个缺点:
在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的 Callback Hell。
如果几个异步操作之间并没有前后顺序之分(例如不需要前一个请求的结果作为后一个请求的参数)时,同样需要等待上一个操作完成再实行下一个操作。
es6中的Promise对象就来解决这个问题。
何为Promise对象?
一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观(解决第1项缺点)。而且由于 Promise.all
这样的方法存在,可以让同时执行多个操作变得简单(解决第2项缺点)。
resolve 和 reject
大家可以用把下方这段代码贴到浏览器开发模式中的console中运行,看看结果。
function helloWorld (ready) {return new Promise(function (resolve, reject) {if (ready) {resolve("Hello World!");} else {reject("Good bye!");}});
}helloWorld(true).then(function (message) {alert(message);
}, function (error) {alert(error);
});
结果是,浏览器弹出 “hello world!”.
上面的代码实现的功能非常简单,helloWord
函数接受一个参数,如果为 true
就打印 "Hello World!",如果为 false
就打印错误的信息。helloWord
函数返回的是一个 Promise 对象。
在 Promise 对象当中有两个重要方法————resolve
和 reject
。
resolve
方法可以使 Promise 对象的状态改变成成功,同时传递一个参数用于后续成功后的操作,在这个例子当中就是 Hello World! 字符串。
reject
方法则是将 Promise 对象的状态改变为失败,同时将错误的信息传递到后续错误处理的操作。
Promise 对象有三种状态:
Fulfilled 可以理解为成功的状态
Rejected 可以理解为失败的状态
Pending 既不是 Fulfilld 也不是 Rejected 的状态,可以理解为 Promise 对象实例创建时候的初始状态
helloWorld 的例子中的 then
方法就是根据 Promise 对象的状态来确定执行的操作,resolve 时执行第一个函数(onFulfilled),reject 时执行第二个函数(onRejected)。
then 和 catch
then
helloWorld 的例子当中利用了 then(onFulfilld, onRejected)
方法来执行一个任务打印 "Hello World!",在多个任务的情况下 then
方法同样可以用一个清晰的方式完成。
例如:
function printHello (ready) {return new Promise(function (resolve, reject) {if (ready) {resolve("Hello");} else {reject("Good bye!");}});
}function printWorld () {alert("World");
}function printExclamation () {alert("!");
}printHello(true).then(function(message){alert(message);}).then(printWorld).then(printExclamation);
结果是顺序弹出:“Hello”“World”“!”
then
可以使用链式调用的写法原因在于,每一次执行该方法时总是会返回一个 Promise 对象。另外,在 then
onFulfilled 的函数当中的返回值,可以作为后续操作的参数。因此上面的方法可以写为:
function printHello (ready) {return new Promise(function (resolve, reject) {if (ready) {resolve("Hello");} else {reject("Good bye!");}});
}printHello(true).then(function (message) {return message;
}).then(function (message) {return message + ' World';
}).then(function (message) {return message + '!';
}).then(function (message) {alert(message);
});
结果输出是:“Hello World!”。
catch
catch
方法是 then(onFulfilled, onRejected)
方法当中 onRejected
函数的一个简单的写法,也就是说可以写成 then(fn).catch(fn)
,相当于 then(fn).then(null, fn)
。使用 catch
的写法比一般的写法更加清晰明确。
Promise.all 和 Promise.race
Promise.all
可以接收一个元素为 Promise 对象的数组作为参数,当这个数组里面所有的 Promise 对象都变为 resolve 时,该方法才会返回。
var p1 = new Promise(function (resolve) {setTimeout(function () {resolve("Hello");}, 3000);
});var p2 = new Promise(function (resolve) {setTimeout(function () {resolve("World");}, 1000);
});Promise.all([p1, p2]).then(function (result) {console.log(result); // ["Hello", "World"]
});
上面的例子模拟了传输两个数据需要不同的时长,虽然 p2 的速度比 p1 要快,但是 Promise.all
方法会按照数组里面的顺序将结果返回。
日常开发中经常会遇到这样的需求,在不同的接口请求数据然后拼合成自己所需的数据,通常这些接口之间没有关联(例如不需要前一个接口的数据作为后一个接口的参数),这个时候 Promise.all
方法就可以派上用场了。
Promise.race 和 Promise.all 方法类似,它同样接收一个数组,不同的是只要该数组中的 Promise 对象的状态发生变化(无论是 resolve 还是 reject)该方法都会返回。
兼容性
在浏览器端,一些主流的浏览器都已经可以使用 Promise 对象进行开发,在 Node.js 配合 babel 也可以很方便地使用。
如果要兼容旧的浏览器,建议可以寻找一些第三方的解决方案,例如 jQuery 的 $.Deferred。
转载于:https://www.cnblogs.com/susie-note/p/6821461.html
浅谈es6 promise相关推荐
- 浅谈ES6原生Promise
ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界. 正所谓: 世界本没有回调,写的人多了,也就有了})})})})}). Promise的兴起,是因为异步方法调用中,往往会出现 ...
- antvf2动态数据_浅谈ES6基础——Promise
import { notification } from 'antd'; fetch(url, newOptions) .then(checkStatus) //checkStatus中主要是对res ...
- 浅谈ES6后的TDZ时间死区
1.const.let和var 在es6新特特性这,let和const可以达到局部作用域的效果. 1.1 var var a = 4 function say () {console.log(a)va ...
- [2017.11.11特辑]以一个光棍节表白案例浅谈ECMAScript6模块化的使用方法
双十一,购物节与光棍节,在这个特殊的日子里研究了一下模块化开发的我,突然想结合这个日子,以一个表白的例子浅谈es6模块化的用法. 在之前的 javascript 中一直是没有模块系统的,随着JavaS ...
- JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
- 浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 前端自动化构建 基本介绍 一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
- 浅谈 TypeScript【下】-- TypeScript 语言规范与基本应用
文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在 [浅谈 TypeScript[上]]中,简单讲述了关于JavaScript静态类型检查工具Flow的用法等.可以看到,我们接下来讲述的TypeS ...
- 三英战豪强,思绪走四方。浅谈我眼中的express、koa和koa2
支持原创,本文为转载文章,转载是为了备忘或丢失,这么好的文章. https://www.jianshu.com/p/3806417a1991?from=timeline 前言 跟好朋友打赌,我要来个技 ...
- 浅谈async函数await用法
async和await相信大家应该不陌生,让异步处理变得更友好. 其实这玩意儿就是个Generator的语法糖,想深入学习得去看看Generator,不然你可能只停留在会用的阶段. 用法很简单,看代码 ...
最新文章
- 【Paper】2015_异构无人机群鲁棒一致性协议设计_孙长银
- Angular CLI 全局 ng.cmd 文件内容分析
- openmp并行编程_OpenMP实现生产者消费者问题
- 中国第一个发《Nature》的竟然是清朝人!被皇帝夸天下第一,他却觉得羞耻..........
- 【Python】Python中的引用和赋值
- spark学习-66-源代码:schedulerBackend和taskScheduler的创建(4)-yarn
- C语言在main中输入2个整数ab,请教一个C语言问题。若输入3个整数3,2,1,则以下程序输出的结果是.,c 语言问题 输入三个整数 按从小到大输出...
- React Native Modal组件 Android覆盖状态栏
- ArcGISEngine二次开发(1):系统基本功能
- 闽南科技学院计算机分数线,闽南科技学院历年分数线 2021闽南科技学院录取分数线...
- 磁盘加密工具-TrueCrypt
- 啦啦外卖配送端APP打包
- 淘宝店铺新手:实战提升流量销量经验
- js对日期进行升序排序
- java面试知识点总结
- c语言pipe函数,pipe 函数 (C语言)
- 首都师范 博弈论 2 1 1占优策略与占优策略均衡
- 域名进行实名认证需要提交什么资料?
- 【声源定位】语音信号
- html a标签 onload,动态加载script和css标签的onload问题
热门文章
- 第二章 HTML5存储 JSON格式
- python自动处理多个txt文件_怎么用python去实现几个文件中内容的并行处理
- 2018青岛ICPC ZOJ 4061: Magic Multiplication(模拟)
- multimap多重关联容器
- 一文理解 pytorch 拟合网络的过程
- 纹理特征描述之自相关函数法 纹理粗糙性与自相关函数的扩展成正比 matlab代码实现
- C语言实现加密解密功能 附带详细注释源码
- -分类数组-创建//修改(添加/改变原有/合并/删除)分类数组(categorical)
- json标注工具与labelme安装
- import pymysql 没有模块_python模块与包