ES6之Promise

特点

Promise能将回调分离出来,在异步操作执行之后,用链式方法执行回调,虽然es5用封装函数也能实现,但是如果有多层异步的话,就会显得比较繁琐,而Promise用链式则更加直观优雅.
Promise对象不受外界的影响.有三种状态.pending进行中,fulfilled已成功,rejected已失败.只有异步操作的结果可以决定当前是哪一种状态.
状态一旦改变,就不会再变.

语法

Promise 译为承诺,即为如果我做到了,会怎么怎么样,没做到,会怎么怎么样,es6中的promise大致表达的意思也是这样,用于一个异步操作最终完成或者没完成及其结果的表示.

语法

     var promise = new Promise(
     //executor
     function(resolve,reject){
        if(/*异步成功*/){resolve(value)}
        else{reject(error)}
    }
     )
     promise.then(function(value){
     //success
     },funtion(){
     //fail
     })

参数

参数: 为回调函数,回调函数的参数为resolve和reject
resolve和reject分别表示异步操作成功后的回调函数和异步操作失败的回调函数,
resolve函数,将Promise的状态改为fulfilled;reject改为rejected;
Promise实例创建成功后,then方法分别指定不同状态的回调函数

参数executor补充点

回调函数executor在Promise构造函数执行的时候同步执行

//注意打印结果的顺序
let pro = new Promise(function(resolve,reject){
    console.log('inPromise')
    resolve('成功后的回调')
 });
pro.then((data) => console.log(data))
console.log('notInPromise')

// inPromise
// notInPromise
// '成功后的回调'

同步执行是什么意思呢,以上代码中,我只是new了一个实例 pro,但是并没有去调用pro,最终结果仍然打印出了内容,因为new的过程和executor的执行是同时的,所以在创建实例的时候,回调函数就已经在执行了.

有时候我们只是想创建实例,并不想去执行,该怎么办呢?一般的解决办法就是把它包装在一个函数中.需要使用的时候再去执行这个包装函数.

function promisBox(){
 let pro = new Promise(function(resolve,reject){
    console.log('inPromise')
    resolve('成功后的回调')
 });
console.log('notInPromise')
return pro;
}
promisBox().then((data) => console.log(data))

基本用法

promise.then(onFulfilled, onRejected)

如果 onFulfilled, onRejected不是函数，其必须被忽略;若为函数,仅可被调用一次!

onFulfilled在Promise执行结束前不可被调用.

onRejected在被拒绝执行前不可被调用.

创建实例之后,调用.then,then可以接收两个回调函数当作参数.第一个参数是异步执行成功的时候调用,第二个则为失败的时候调用,可省略.

//还用上面的例子
function promisBox(age){
 let pro = new Promise(function(resolve,reject){
    if(age > 18){
    	resolve('成功后的回调')
    }else{
   	 reject('失败后的回调')
    }
 });
return pro;
}
promisBox(24).then(
	(res) => console.log(res), //接收上面resolve中的参数
    (error) => console.log(error) //接收上面reject中的参数
)
//'成功后的回调'
promisBox(17).then(
	(res) => console.log(res), //接收上面resolve中的参数
    (error) => console.log(error) //接收上面reject中的参数
)
//'失败后的回调'

除了then之外,还有catch方法;catch和then里的第二个参数效果一样,不过多了一个功能,如果then第一个参数内代码出错,并不会报错卡死,而是会进到catch方法内.

function promisBox(age){
 let pro = new Promise(function(resolve,reject){
    if(age > 18){
    	resolve('成功后的回调')
    }else{
   	 reject('失败后的回调')
    }
 });
return pro;
}
promisBox(24)
	.then(
		(res) => console.log(xixi,res), //xixi变量没有定义,进入到catch方法,不报错
	)
    .catch(error => console.log(error)) //接收then第一个参数内的报错信息
// failed
// ReferenceError: xixi is not defined...

小例子

案例1

var promise2 = new Promise((resolve,reject) => {
    setTimeout(function (){resolve('success')},250)
})
promise2.then((suc) => console.log(suc)) // 'success'

案例2(摘自阮一峰老师,链接在最后)

var getJSON = function(url) {
var promise = new Promise(function(resolve, reject){
var client = new XMLHttpRequest();
client.open("GET", url);
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();

function handler() {
  if (this.readyState !== 4) {
    return;
  }
  if (this.status === 200) {
    resolve(this.response);
  } else {
    reject(new Error(this.statusText));
  }
 };
});
 return promise;
};
getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

对象方法

Promise.prototype.then()

如果有多层异步和回调

function promisBox(){
     let pro = new Promise(function(resolve,reject){
        console.log('inPromise1')
        resolve('成功后的回调1')
     });
    console.log('notInPromise1')
    return pro;
}
function promisBox2(){
     let pro = new Promise(function(resolve,reject){
        console.log('inPromise2')
        resolve('成功后的回调2')
     });
    console.log('notInPromise2')
    return pro;
}
promisBox()
    .then((res) => {console.log(res);return promisBox2()})
    .then((res) => {console.log(res);return '也可以直接返回数据,作为参数'})
    .then((res) => {console.log(res)})
//inPromise1
//notInPromise1
// 成功后的回调1
// inPromise2
// notInPromise2
// 成功后的回调2
// 也可以直接返回数据,作为参数

一个异步的结果返回另一个异步操作

var  promise1 = new Promise((resolve,reject) => {
	setTimeout(() => reject('reject'),3000)
})
var promise2 = new Promise((resolve,reject) => {
    setTimeout(() => resolve(promise1),1000)
} )  
promise2 //这里的then语句是promise1的事件了
    .then(res => console.log('success',res))
    .catch(error => console.log('failed',error))
//三秒之后 打印出 'failed reject'

promise1的状态决定了promise2的状态,所以这个时候,所以没有执行promise1的resolve函数

Promise.prototype.catch()

Promise.prototype.catch() 等同于.then(null,reject)

以下两种写法效果一样,一般用第二种方法

// 一
var promise = new Promise(function(resolve, reject) {
  console.log(xixixixi)
});
promise
    .then(null,err => console.log('reject',err)) 
// 二
promise
    .catch(err => console.log('reject',err))
// reject 
// ReferenceError: xixixixi is not defined

Promise实例在resolve之后再有错误,不会被捕获.

var promise = new Promise(function(resolve, reject) {
  resolve('success')
  console.log(xixixixi)
});
promise
	.then(res => console.log(res))
	.catch(err => console.log(err))
// success

任意一个then发生错误的时候,都会被最后的catch捕获到

promise
	.then(res => console.log(res))
    .then(res => console.log(res))
    .then(res => console.log(res))
    .catch(err => console.log(err)) //以上三个,任意一个出现错误,都会被捕捉

catch返回的是Promise,所以之后可以继续.then

 var promise = new Promise(function(resolve, reject) {
  console.log(xixixixi)
 });
 promise
	.catch(err => console.log(err))
    .then(res => console.log('继续执行'))
// ReferenceError: xixixixi is not defined
// 继续执行

上例换个顺序

var promise = new Promise(function(resolve, reject) {
  resolve('随便')
});
promise
	.catch(err => console.log(err))
    .then(res => {console.log(res);console.log(xixixi)})
    //.catch(err => console.log(err))
// 先打印出  '随便'
// 然后抛出错误 ReferenceError: xixixi is not defined;
// 之前都是打印出错误,不影响运行.这里是抛出错误,停止运行
// 因为这里的then出现错误,跟之前的catch无关了,错误无法被捕获

Promise.all()

Promise.all(iterable);

只有参数中的每个实例的状态都编程fulfilled或者其中一个变为rejected,才会调用之后的回调函数

首先看一段代码,了解用法,还是用上面promiseBox的例子,下例中,参数为 promisBox 和 promisBox2 组成的数组,all的状态是由数组中的值共同决定,只有每个值的状态都是fulfilled,all的状态才会变成fulfilled.返回值为一个数组.

function promisBox(){
     let pro = new Promise(function(resolve,reject){
        resolve('成功后的回调1')
     });
    return pro;
}
function promisBox2(){
     let pro = new Promise(function(resolve,reject){
        resolve('成功后的回调2')
     });
    return pro;
}

var all = Promise.all([promisBox(),promisBox2()])
    .then((res) => console.log(res))
    .catch(err => console.log(err))
// ["成功后的回调1", "成功后的回调2"]

数组中有一个值的状态为rejected,则all的状态为rejected

function promisBox(){
     let pro = new Promise(function(resolve,reject){
        resolve('成功后的回调1')
     });
    return pro;
}
function promisBox2(){
     let pro = new Promise(function(resolve,reject){
        resolve('成功后的回调2')
     });
    return pro;
}

function promisBox3(){
     let pro = new Promise(function(resolve,reject){
        console.log(xixixixi)
        resolve('成功后的回调3')
     });
    return pro;
}
var all = Promise.all([promisBox(),promisBox2(),promisBox3()])
    .then((res) => console.log(res))
    .catch(err => console.log(err))
//ReferenceError: xixixixi is not defined

如果参数实例中自己定义了catch,如果此参数的状态是rejected,执行的是它自己的catch,而不是all的catch

 function promisBox(){
     let pro = new Promise(function(resolve,reject){
        resolve('成功后的回调1')
     });
    return pro;
}
function promisBox2(){
     let pro = new Promise(function(resolve,reject){
        resolve('成功后的回调2')
     });
    return pro;
}

function promisBox3(){
     let pro = new Promise(function(resolve,reject){
        console.log(xixixixi)
        resolve('成功后的回调3')
     })
		.catch(err => console.log('promisBox3',err));
    return pro;
}
var all = Promise.all([promisBox(),promisBox2(),promisBox3()])
    .then((res) => console.log(res))
    .catch(err => console.log('all',err))
// promisBox3 ReferenceError: xixixixi is not defined
// ["成功后的回调1", "成功后的回调2", undefined]

promisBox3首先是rejected,但是他有自己的catch,通过catch方法,返回一个新的Promise实例,这个新的实例状态是fulfilled;因此最后all会执行then的回调

Promise.race()

all的效果是,谁执行的最慢,就以谁为基准执行回调,而race相反,race译为比赛,效果是谁执行的快,就以谁为基准去执行回调.
race的用法和all差不多.

具体例子

 function promisBox(){
     let pro = new Promise(function(resolve,reject){
     	//console.log(hahahaha)    第一个注释
        resolve('成功后的回调1')
     });
    return pro;
}
function promisBox2(){
     let pro = new Promise(function(resolve,reject){
        setTimeout(function(){
        	//console.log(hahahaha)  第二个注释
        	resolve('成功后的回调2')}
         ,2000)
     });
    return pro;
}

var race = Promise.race([promisBox(),promisBox2()])
    .then((res) => console.log(res))
    .catch(err => console.log(err))
// 成功后的回调1
//将第一个注释取消  ReferenceError: hahahaha is not defined
// 将第二个注释取消   '成功后的回调1' 两秒后抛出错误hahahaha is not ...,停止运行.

参考

阮一峰ES6入门
 MDN

posted on 2017-09-22 16:47 sivaepoch 阅读(172) 评论(0) 编辑收藏举报