ES6的Promise浅析
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。 它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。
Promise就是一个对象,Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject 。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
// 第一步:定义一个Promise对象
const promise = new Promise(function(resolve, reject) {
// 封装一些异步调用操作
if (/* 异步操作成功 */){
resolve(value); //这句是不可少的
} else {
reject(error);
}
}); // 第二步:定义一个函数
var myFun = function(){
return promise ; //返回一个promise对象
} // 第三步:正式使用Promise
myFun.then( function(value) {
// 异步执行成功时自动调用
}, function(error) {
// 异步执行失败时自动调用
});
// then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved(成功) 时调用,第二个回调函数是 Promise 对象的状态变为
// rejected(失败)时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受 Promise 对象传出的值作为参数。
resolve 函数的作用是,将 Promise 对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject 函数的作用是,将 Promise 对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
上面都是纸上谈兵,下面用一个小例子真实体验一下:
function timeout(ms) {
return new Promise((resolve, reject) => {
console.log('-------异步处理中-----------') ;
setTimeout(resolve, ms, 'done'); //第三个参数'done'会作为参数传递给setTimeout
});
}
//异步调用成功后then后面的第一个函数会被执行
timeout(100).then((value) => {
console.log(value);
});
执行后输出:
-------异步处理中-----------
done
Promise完全改变了js异步编程的写法,让异步编程变得十分的易于理解,特别是出现异步的嵌套回调时,使用Promise可以用链式的代码结构替代传统的事件监听或回调函数的方式。例如上面的代码如果出现嵌套回调时,then里面的函数就应该写成返回一个Promise,代码结构会如下:
timeout(100)
.then( (value) => {
.....
})//返回Promise对象 .then( (value) => {
.....
})//返回Promise对象
.then( (value) => {
......
}); //返回Promise对象
then 方法返回的是一个新的 Promise 实例(注意,不是原来那个 Promise 实例)。因此可以采用链式写法,即 then 方法后面再调用另一个 then 方法
ES6的Promise浅析的更多相关文章
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- ES6的Promise
推荐一下我觉得不错关于Promise的好文章,通俗易懂 说起ES6的Promise就要提及一下JQ的$.when()方法,两者基本相同 面试的时候经常会问Promise,如果同学们能在回答Promis ...
- ES6语法 promise用法
ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...
- 浅谈ES6原生Promise
浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...
- ES6之Promise用法详解
一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...
- ES6中promise总结
一.什么是ES6的Promise 讲太多也没有.直接在打印出来就好,console.dir(Promise) Promise 是一个构造函数,自身有all, reject, resolve 这几个眼熟 ...
- ES6新增"Promise"可避免回调地狱
Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...
- 关于ES6的Promise的使用深入理解
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- 解读Es6之 promise
单线程: 在同一时间只能有同一任务进行.JavaScript就是一门单线程语言 当有多个任务需要进行时,则需要进行排队,前一个执行完毕才能执行下一个; ...
随机推荐
- Weblogic启动服务时候提示:Authentication for user weblogic denied
一.问题描述: 在Linux系统上对weblogic10.3.6搭建完成后,启动控制台没问题,但是新建的服务怎么都起不来,而且在服务的目录下也有了认证文件boot.properties文件,也确定用户 ...
- MySql 游标笔记
delimiter &&create PROCEDURE findProjectDetailsByProjectId(in p_userId int)BEGIN DECLARE d ...
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- springboot打包成war,部署到tomcat无法访问的问题
如题:实在是太坑.平时本地测试觉得很方便,但是到了项目打包发布掉链子了. 如很多帖子一样: 首先springboot内嵌的tomcat,再依赖servlet-api,修改启动类继承SpringBoot ...
- Web前端框架与移动应用开发第八章
Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...
- bzoj千题计划321:bzoj5251: [2018多省省队联测]劈配(网络流 + 二分)
https://www.lydsy.com/JudgeOnline/problem.php?id=5251 第一问: 左边一列点代表学生,右边一列点代表导师 导师向汇点连流量为 人数限制的 边 然后从 ...
- HDU 1022(火车过站 栈)
题意是给定火车进站的序列和出站的序列,问能否完成转换,若能输出过程. 和另一道以火车进站为背景的栈应用题类似,但增加了对于过程的输出,只需要多记录一下进出站顺序即可. #include <bit ...
- Css单位px,rem,em,vw,vh的区别
px px就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位.像素px是相对于显示器屏幕分辨率而言的 em em是相对长度单位.相对于当前对象内文本的字体尺寸(参考物是父元素的font-s ...
- nginx静态资源反向代理
server { listen 80; server_name music.didi365.com; index index.php index.html index.htm; root /alida ...
- Javaweb学习笔记——(十八)——————事务、DBCP、C3P0、装饰者模式
事务 什么是事务? 转账: 1.给张三账户减1000元 2.给李四账户加1000元 当给张三账户减1000元之后,抛出了异常,这 ...