ES6 入门Promise
Promise是一个对象用来传递异步操作的消息,有三种状态:Pending(进行中),Resolved(已完成又称Fulfilled)和Rejected(已失败)。
特点:对象状态不受外界的影响。一旦状态改变就不会在变,任何时候都可以得到这个结果。将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数。
有all、reject、resolve,原型上有then、catch的方法。
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据返回');
}, 2000);
});
function runAsync(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据返回');
}, 2000);
});
return p;
}
runAsync()
function runAsync(callback){
setTimeout(function(){
console.log('执行完成');
callback('数据返回');
}, 2000);
} runAsync(function(data){
console.log(data);
});
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
这样能够按顺序,每隔两秒输出每个异步回调中的内容,在runAsync2中传给resolve的数据,能在接下来的then方法中拿到。
执行的顺序:异步任务1完成 数据1,异步任务2完成 数据2,异步任务3完成 数据3,
function runAsync1(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务1完成');
resolve('数据1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务2完成');
resolve('数据2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('异步任务3完成');
resolve('数据3');
}, 2000);
});
return p;
}
在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据:执行的顺序:异步任务1完成 数据1,异步任务2完成 数据2,返回数据啦
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return '返回数据啦';
})
.then(function(data){
console.log(data);
});
reject的作用就是把Promise的状态置为rejected,这样我们在then中就能捕捉到,然后执行“失败”情况的回调。看下面的代码。
function getNumber(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*100); //生成1-100的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
} getNumber()
.then(
function(data){
console.log('resolved');
console.log(data);
},
function(reason, data){
console.log('rejected');
console.log(reason);
}
);
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
效果和写在then的第二个参数里面一样。不过它还有另外一个作用:在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),不会报错卡死js,而是会进到这个catch方法中。
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
all的用法
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
ES6 入门Promise的更多相关文章
- ES6中Promise的入门(结合例子)
一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...
- ES6入门八:Promise异步编程与模拟实现源码
Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...
- ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
- es6入门4--promise详解
可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...
- ES6入门十二:Module(模块化)
webpack4打包配置babel7转码ES6 Module语法与API的使用 import() Module加载实现原理 Commonjs规范的模块与ES6模块的差异 ES6模块与Nodejs模块相 ...
- ES6入门十一:Generator生成器、async+await、Promisify
生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...
- ES6的promise对象研究
ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...
- ES6的Promise
推荐一下我觉得不错关于Promise的好文章,通俗易懂 说起ES6的Promise就要提及一下JQ的$.when()方法,两者基本相同 面试的时候经常会问Promise,如果同学们能在回答Promis ...
- es6入门3--箭头函数与形参等属性的拓展
对函数拓展兴趣更大一点,优先看,前面字符串后面再说,那些API居多,会使用能记住部分就好. 一.函数参数可以使用默认值 1.默认值生效条件 在变量的解构赋值就提到了,函数参数可以使用默认值了.正常我们 ...
随机推荐
- react-native 打包apk
如果你是学习Android的和我一样的话那一定会用一些软件开发,如WebStore 等等 那么这里我就来讲一下在WebStore 开发的App 如何打包成一个手机可以安装的apk软件 1.首先你的Ap ...
- Let me introduce myself
介绍自己,从开学到这上半学期结束,不知道说了多少个版本.开学军训,要自我介绍:军训结束,在班里要自我介绍:参加社团,面试要自我介绍.....不能说对每个人,至少对于我来说,在众人面前开口介绍自己,总还 ...
- python3入门教程(二)操作数据库(一)
概述 最近在准备写一个爬虫的练手项目,基本想法是把某新闻网站的内容分类爬取下来,保存至数据库,再通过接口对外输出(提供后台查询接口).那么问题就来了,python到底是怎么去操作数据库的呢?我们今天就 ...
- 浮动滚动条 slimScroll
1.引入jquery 2.映入slimScrolljs :<script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.8/jq ...
- JS实现大整数乘法(性能优化、正负整数)
本方法的思路为: 一:检查了输入的合法性(非空,无非法字符) 二:检查输入是否可以进行简单计算(一个数为 0,1,+1,-1) 三:去掉输入最前面可能有的正负符号,并判断输出的正负 四:将输入的值分成 ...
- 如何使用HackRF做一个简单的IMSI捕获器
关于IMSI IMSI为国际用户识别码(International Mobile Subscriber Identity)的缩写,是用于区分蜂窝网络中不同用户的,在所在蜂窝网络中不重复的识别码.IMS ...
- Postman插件使用
Postman插件:模拟前端请求后台,用于后台对外接口测试 POSTMAN解决..先解压Postman_v4.1.3.rar 然后按自己实际解压的文件夹里面的这个文件夹_metadata前面的_去掉 ...
- 神州数码OSPF路由协议
实验要求:熟练掌握OSPF配置方法 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 ip addres ...
- httpd does not appear to be running and proxying cobbler, or SELinux is in the way.
当我们执行cobbler check时,出现这种错误:httpd does not appear to be running and proxying cobbler, or SELinux is i ...
- Power BI Desktop 新年快乐!
新年快乐 2018年是Power BI 多产的一年!更新发布的功能就超过150多个,真是相当的强大! 为了庆祝这一成功的一年,Power BI官方团队制作了一个有趣的视频,展示他们对2018年最喜欢的 ...