Promise是一个对象用来传递异步操作的消息,有三种状态:Pending(进行中),Resolved(已完成又称Fulfilled)和Rejected(已失败)。

特点:对象状态不受外界的影响。一旦状态改变就不会在变,任何时候都可以得到这个结果。将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数。

有all、reject、resolve,原型上有then、catch的方法。

var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据返回');
}, 2000);
});
Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。
 执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。(‘执行完成’到‘数据返回’)
运行代码,会在2秒后输出“执行完成”。
只是new了一个对象,并没有调用它,我们传进去的函数就已经执行了。所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:

function runAsync(){
var p = new Promise(function(resolve, reject){
//异步操作
setTimeout(function(){
console.log('执行完成');
resolve('数据返回');
}, 2000);
});
return p;
}
runAsync()
 
Promise就这点能耐?我把回调函数封装一下,给runAsync传进去不也一样吗,就像这样:

function runAsync(callback){
setTimeout(function(){
console.log('执行完成');
callback('数据返回');
}, 2000);
} runAsync(function(data){
console.log(data);
});
效果也是一样的,Promise的优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行回调操作。 
Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。

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函数用来异步获取一个数字,2秒后执行完成,如果数字小于等于5,是“成功”,调用resolve修改Promise的状态。否则是“失败”,调用reject并传递一个参数,作为失败的原因。
 
运行getNumber并且在then中传了两个参数,then方法可以接受两个参数,第一个对应resolve的回调,第二个对应reject的回调。所以我们能够分别拿到他们传过来的数据。多次运行这段代码,
随机得到下面两种结果:
或者
Promise对象除了then方法,还有一个catch方法,它和then的第二个参数一样,用来指定reject的回调,用法:

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);
});
在resolve的回调中,somedata这个变量是没有被定义的。如果我们不用Promise,代码运行到这里就直接在控制台报错了,不往下运行了。但是在这里,会得到这样的结果:
 
也就是说进到catch方法里面去了,而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了,这与我们的try/catch语句有相同的功能。

all的用法

Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数,看下面的例子:
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});
用Promise.all来执行,all接收一个数组参数,里面的值最终都算返回Promise对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。三个异步操作返回的数据都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是上面的results。所以上面代码的输出结果就是:异步任务1完成,异步任务2完成 ,异步任务3完成,数据1,数据2,数据3
 
有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据。
场景是:
  一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。
  所有的都加载完后,我们再进行页面的初始化。

ES6 入门Promise的更多相关文章

  1. ES6中Promise的入门(结合例子)

    一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...

  2. ES6入门八:Promise异步编程与模拟实现源码

    Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...

  3. ES6入门笔记

    ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量 避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...

  4. es6入门4--promise详解

    可以说每个前端开发者都无法避免解决异步问题,尤其是当处理了某个异步调用A后,又要紧接着处理其它逻辑,而最直观的做法就是通过回调函数(当然事件派发也可以)处理,比如: 请求A(function (请求响 ...

  5. ES6入门十二:Module(模块化)

    webpack4打包配置babel7转码ES6 Module语法与API的使用 import() Module加载实现原理 Commonjs规范的模块与ES6模块的差异 ES6模块与Nodejs模块相 ...

  6. ES6入门十一:Generator生成器、async+await、Promisify

    生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...

  7. ES6的promise对象研究

    ES6的promise对象研究 什么叫promise? Promise对象可以理解为一次执行的异步操作,使用promise对象之后可以使用一种链式调用的方式来组织代码:让代码更加的直观. 那我们为什么 ...

  8. ES6的Promise

    推荐一下我觉得不错关于Promise的好文章,通俗易懂 说起ES6的Promise就要提及一下JQ的$.when()方法,两者基本相同 面试的时候经常会问Promise,如果同学们能在回答Promis ...

  9. es6入门3--箭头函数与形参等属性的拓展

    对函数拓展兴趣更大一点,优先看,前面字符串后面再说,那些API居多,会使用能记住部分就好. 一.函数参数可以使用默认值 1.默认值生效条件 在变量的解构赋值就提到了,函数参数可以使用默认值了.正常我们 ...

随机推荐

  1. react-native 打包apk

    如果你是学习Android的和我一样的话那一定会用一些软件开发,如WebStore 等等 那么这里我就来讲一下在WebStore 开发的App 如何打包成一个手机可以安装的apk软件 1.首先你的Ap ...

  2. Let me introduce myself

    介绍自己,从开学到这上半学期结束,不知道说了多少个版本.开学军训,要自我介绍:军训结束,在班里要自我介绍:参加社团,面试要自我介绍.....不能说对每个人,至少对于我来说,在众人面前开口介绍自己,总还 ...

  3. python3入门教程(二)操作数据库(一)

    概述 最近在准备写一个爬虫的练手项目,基本想法是把某新闻网站的内容分类爬取下来,保存至数据库,再通过接口对外输出(提供后台查询接口).那么问题就来了,python到底是怎么去操作数据库的呢?我们今天就 ...

  4. 浮动滚动条 slimScroll

    1.引入jquery 2.映入slimScrolljs :<script src="https://cdn.bootcss.com/jQuery-slimScroll/1.3.8/jq ...

  5. JS实现大整数乘法(性能优化、正负整数)

    本方法的思路为: 一:检查了输入的合法性(非空,无非法字符) 二:检查输入是否可以进行简单计算(一个数为 0,1,+1,-1) 三:去掉输入最前面可能有的正负符号,并判断输出的正负 四:将输入的值分成 ...

  6. 如何使用HackRF做一个简单的IMSI捕获器

    关于IMSI IMSI为国际用户识别码(International Mobile Subscriber Identity)的缩写,是用于区分蜂窝网络中不同用户的,在所在蜂窝网络中不重复的识别码.IMS ...

  7. Postman插件使用

    Postman插件:模拟前端请求后台,用于后台对外接口测试 POSTMAN解决..先解压Postman_v4.1.3.rar 然后按自己实际解压的文件夹里面的这个文件夹_metadata前面的_去掉 ...

  8. 神州数码OSPF路由协议

    实验要求:熟练掌握OSPF配置方法 拓扑如下 R1 enable 进入特权模式 config 进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 ip addres ...

  9. 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 ...

  10. Power BI Desktop 新年快乐!

    新年快乐 2018年是Power BI 多产的一年!更新发布的功能就超过150多个,真是相当的强大! 为了庆祝这一成功的一年,Power BI官方团队制作了一个有趣的视频,展示他们对2018年最喜欢的 ...