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. Visual Basic 2017 操作Excel和word【2】持续更新……

    1.控制台程序创建Excel,并设置状态栏显示“Hello World”文本 Module Module1 Private exitXL As Boolean = False Dim WithEven ...

  2. 软工作业No.7 甜美女孩第五周--测试与发布

    Alpha版本发布说明 一.功能介绍 本团队所做的多模式自定义2048是用来进行纸牌模式以及正常基础模式版本的2048小游戏的.Alpha版本具有的功能大体如下: 初始界面- 纸牌模式- 基础模式- ...

  3. GetSystemInfo 和 GlobalMemoryStatus获取系统信息,内存信息

    // GetSystemInfo.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #in ...

  4. setTimeout中调用this

    项目案例: 左右切换tab容器的动作,封装到一个对象中: var slidingComp = { startX : 0 , moveX : 0 , ...... start : function(e) ...

  5. More is better

    题目描述: Mr Wang wants some boys to help him with a project. Because the project is rather complex, the ...

  6. oracle11g的监听配置文件中的program和env两个配置,必须干掉,客户端才能正常连接

    oracle11g的监听配置文件中的program和env两个配置,必须干掉,客户端才能正常连接 oracle11g的监听配置文件中的program和env两个配置,必须干掉,客户端才能正常连接 or ...

  7. js实现table表格相同内容按需合并

    uniteTdCells(tableId) { var table = document.getElementById(tableId); for (let i = 0; i < table.r ...

  8. vue 使用vux封装的微信分享

    main.js引入 import {WechatPlugin} from 'vux' Vue.use(WechatPlugin) 公共的jswxShare.js import Vue from 'vu ...

  9. ORA-00847: MEMORY_TARGET/MEMORY_MAX_TARGET and LOCK_SGA cannot be set together

    群里有位兄弟,测试系统修改sga_lock=true参数后,重启库报错 ORA-00847: MEMORY_TARGET/MEMORY_MAX_TARGET and LOCK_SGA cannot b ...

  10. Js高级 事件 对象

    1.事件 浏览器客户端上客户触发的行为都成为事件 所有的事件都是天生自带的,不需要我们我去绑定,只需要我们去触发. 通过obj.事件名=function(){} 事件名:onmouseover onm ...