javascript之promise

Promise定义

在promise以前,js用回调函数来处理异步请求,当上一次请求和下一次请求存在依赖关系的时候,就会出现回调地狱,类似这样嵌套回调

$.post('/getUser', function(data) {
	$.post('/getInfo', userId: data.id, function(){
		...
	})
})

为了更好的异步流程控制,es6出现了promise,promsie对象,也是可以用来实现异步的,简单的语法如下

new Promise(
    /* executor */ 
    function(resolve, reject){...}
);

Promise状态

promise有以下三种状态,只要有一种状态被填充,一个promise就执行完毕,可以通过then或者catch来捕捉填充的状态,状态不可逆

  • pending: 初始状态, 初始状态,未完成或拒绝。
  • fulfilled: 意味着操作成功完成。
  • rejected: 意味着操作失败。

Promise方法

Promise.all(iterable)

这个方法返回一个新的promise对象,该promise对象在iterable里所有的promise对象都成功的时候才会触发成功,一旦有任何一个iterable里面的promise对象失败则立即触发该promise对象的失败。这个新的promise对象在触发成功状态以后,会把一个包含iterable里所有promise返回值的数组作为成功回调的返回值,顺序跟iterable的顺序保持一致;如果这个新的promise对象触发了失败状态,它会把iterable里第一个触发失败的promise对象的错误信息作为它的失败错误信息。Promise.all方法常被用于处理多个promise对象的状态集合。

const pro1 = new Promise((resolve, reject) => {
    resolve('pro1结果')
});

const pro2 = new Promise((resolve, reject) => {
    resolve('pro2结果');
})

Promise.all([pro1, pro2]).then((res1) => {
    console.log(res1); // ['pro1结果', 'pro2结果']
})

Promise.race(iterable)

当iterable参数里的任意一个子promise被成功或失败后,父promise马上也会用子promise的成功返回值或失败详情作为参数调用父promise绑定的相应句柄,并返回该promise对象。

const pro1 = new Promise((resolve, reject) => {
    setTimeout(resolve(100), 100)
});

const pro2 = new Promise((resolve, reject) => {
    setTimeout(resolve(200), 500);
})

Promise.race([pro1, pro2]).then((res) => {
    console.log(res);   // pro1先完成,结果是100
})

Promise.reject(reason)

调用Promise的rejected句柄,并返回这个Promise对象。

Promise.resolve(value)

用成功值value完成一个Promise对象。如果该value为可继续的(thenable,即带有then方法),返回的Promise对象会“跟随”这个value,采用这个value的最终状态;否则的话返回值会用这个value满足(fullfil)返回的Promise对象。

Promise错误捕捉

当有多个promise链式调用的时候,其中一个填充了reject状态,后续的将不会继续执行,例如

function dealOne () {
    return new Promise((resolve, reject) => {
        setTimeout(resolve(200), 500);
    });
}

function dealTwo (a) {
    return new Promise((resolve, reject) => {
        reject('error')
    })
}

function dealThree () {
    return new Promise((resolve, reject) => {
        resolve('3')
    })
}

dealOne().then(dealTwo).then(dealThree).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

在dealTwo函数中,操作失败了,catch就会捕捉到错误,dealThree不会继续执行

当promise发生错误(reject)时,有两种方法,

1. 通过链式调用catch可以捕捉reject的结果

2. 通过then的第二个回调函数捕捉

dealTwo().then((res) => {}, (err) => { console.log('then ' + err) }).catch( err => console.log('catch' + err) )

在这里由于then的第二个回调捕捉了错误,所以先输出的结果为‘then error’,后面的catch就不执行了

Promise问题

function doSomething() {
    return new Promise((resolve, reject) => {
        resolve('doSomething');
    })
}

function doSomethingElse() {
    return new Promise((resolve, reject) => {
        resolve('doSomethingElse');
    })
}

doSomething().then(function () {
    return doSomethingElse();
}).then(res => {
    console.log(res);   // doSomethingElse
});

doSomething().then(function (res) {
    console.log('receive: ' + res)
    doSomethingElse();
}).then(res => {
    console.log(res);  // undefined
});

doSomething().then(doSomethingElse()).then(res => {
    console.log(res);   // doSomething
});

doSomething().then(doSomethingElse).then(res => {
    console.log(res);   // doSomethingElse
});

这四个东西有什么区别呢?

第一个很好理解:结果是doSomethingElse

第二个,由于第一个then有一个回调函数接收了结果,但是没返回新的promise,所以结果是undefined,其实相当于

doSomething().then(function (res) {
    console.log('receive: ' + res)
    doSomethingElse();
}).then(res => {
    console.log(res);   // undefined
});

第三个,由于then后执行了一个普通函数,所以doSomething()的值会穿透到下一个then接收,类似下面的例子

doSomething().then(null).then().then(res => {
    console.log(res);  // doSomething
})

第四个,其实跟第一个一样,只是简单的写法,所以结果是doSomethingElse

参考资料: https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html