promise是es6中的函数,规范了如何处理异步任务的回调函数,功能类似于jquery的defferred。简单说就是通过promise对象的不同状态调用不同的回调函数。目前ie8及以下不支持,其他浏览器都支持。
promise对象的状态,从pending转换为resolved或rejected之后,这个promise对象的状态就不会再发生任何变化。
使用步骤:
var promise = new promise(function(resolve, reject) {
// 异步任务,通过调用resolve(value) 或 reject(error),以改变promise对象的状态;改变状态的方法只能在此调用。
//promise状态改变后,会调用对应的回调方法
});
promise.then(function(value){//resolve时的回调函数,参数由异步的函数传进来})
.catch(function(error){//发生异常时或明确reject()时的回调函数})
具体使用:
function geturl(url) { //因为promise创建时即执行,所以用工厂函数封装promise对象
return new promise(function (resolve, reject) {
var req = new xmlhttprequest();
req.open('get', url, true);
req.onload = function () {
if (req.status === 200) {
resolve(req.responsetext);
} else {
reject(new error(req.statustext));
}
};
req.onerror = function () {
reject(new error(req.statustext));
};
req.send();
});
}
// 运行示例
var url = "http://httpbin.org/get";
geturl(url).then(function onfulfilled(value){
console.log(value);
}).catch(function onrejected(error){
console.error(error);
})
promise的回调只有异步方式,即使是同步任务的回调也是异步执行 。
var promise = new promise(function (resolve){
console.log("inner promise"); // 执行1:同步任务先执行
resolve(‘callback');
});
promise.then(function(value){
console.log(value); // 执行3:虽然注册时状态为resolved,但回调仍是异步的;
});
console.log("outer promise"); // 执行2:同步代码先执行
promise的方法链
then方法注册的回调会依次被调用,每个then方法之间通过return 返回值传递参数。但是回调中的异常会导致跳过之间then的回调,直接调用catch的回调,之后再继续调用剩下的then的回调。在then(onfulfilled, onrejected)中,onfulfilled的异常不会被自己的onrejected捕获,所以优先使用catch。
promise .then(taska) .then(taskb) .catch(onrejected) .then(finaltask);
taska抛异常,taskb被跳过,finaltask仍会被调用,因为catch返回的promise对象的状态为resolved。
then方法内可以返回3种值
1. 返回另一个promise对象,下一个then方法根据其状态选择onfullfilled/onrejected回调函数执行,参数仍由新promise的resolv/reject方法传递;
2. 返回一个同步值,下一个then方法沿用当前promise对象的状态,无需等异步任务结束会立即执行;实参为上一then的返回值;如果没有return,则默认返回undefined;
3. 抛出异常(同步/异步):throw new error(‘xxx');
then不仅是注册一个回调函数,还会将回调函数的返回值进行变换,创建并返回一个新promise对象。实际上promise在方法链中的操作的都不是同一个promise对象。
var apromise = new promise(function (resolve) {
resolve(100);
});
var thenpromise = apromise.then(function (value) {
console.log(value);
});
var catchpromise = thenpromise.catch(function (error) {
console.error(error);
});
console.log(apromise !== thenpromise); // => true
console.log(thenpromise !== catchpromise);// => true
promise.all()静态方法,同时进行多个异步任务。在接收到的所有promise对象都变为fulfilled 或者rejected 状态之后才会继续进行后面的处理。
promise.all([promisea, promiseb]).then(function(results){//results是个数组,元素值和前面promises对象对应});
// 由promise对象组成的数组会同时执行,而不是一个一个顺序执行,开始时间基本相同。
function timerpromisefy(delay) {
console.log('开始时间:”'+date.now())
return new promise(function (resolve) {
settimeout(function () {
resolve(delay);
}, delay);
});
}
var startdate = date.now();
promise.all([
timerpromisefy(100), //promise用工厂形式包装一下
timerpromisefy(200),
timerpromisefy(300),
timerpromisefy(400)
]).then(function (values) {
console.log(values); // [100,200,300,400]
});
不同时执行,而是一个接着一个执行promise
//promise factories返回promise对象,只有当前异步任务结束时才执行下一个then
function sequentialize(promisefactories) {
var chain = promise.resolve();
promisefactories.foreach(function (promisefactory) {
chain = chain.then(promisefactory);
});
return chain;
}
promise.race()同all()类似,但是race()只要有一个promise对象进入 fulfilled 或者 rejected 状态的话,就会执行对应的回调函数。不过在第一个promise对象变为fulfilled之后,并不影响其他promise对象的继续执行。
//沿用promise.all()的例子
promise.race([
timerpromisefy(1),
timerpromisefy(32),
timerpromisefy(64),
timerpromisefy(128)
]).then(function (value) {
console.log(values); // [1]
});
promise.race()作为定时器的妙用
promise.race([
new promise(function (resolve, reject) {
settimeout(reject, 5000); // timeout after 5 secs
}),
dosomethingthatmaytakeawhile()
]);
在then中改变promise状态
因为then的回调中只有value参数,没有改变状态的方法(只能在构造方法的异步任务中使用),要想改变传给下一个then的promise对象的状态,只能重新new一个新的promise对象,在异步任务中判断是否改变状态,最后return出去传给下一个then/catch。
var promise = promise.resolve(‘xxx');//创建promise对象的简介方法
promise.then(function (value) {
var pms=new promise(function(resolve,reject){
settimeout(function () {
// 在此可以判断是否改变状态reject/resolve
reject(‘args');
}, 1000);
})
return pms; //该promise对象可以具有新状态,下一个then/catch需要等异步结束才会执行回调;如果返回普通值/undefined,之后的then/catch会立即执行
}).catch(function (error) {
// 被reject时调用
console.log(error)
});
获取两个promises的结果
//方法1:通过在外层的变量传递
var user;
getuserbyname('nolan').then(function (result) {
user = result;
return getuseraccountbyid(user.id);
}).then(function (useraccount) {
//可以访问user和useraccount
});
//方法2:后一个then方法提到前一个回调中
getuserbyname('nolan').then(function (user) {
return getuseraccountbyid(user.id).then(function (useraccount) {
//可以访问user和useraccount
});
});
注意使用promise时的整体结构
假定dosomething()和dosomethingelse()都返回了promise对象
常用方式:
dosomething().then(dosomethingelse).then(finalhandler);
dosomething
|-----------------|
dosomethingelse(resultofdosomething) //返回新promise,下一个then要收到新状态才执行
|------------------|
finalhandler(resultofdosomethingelse)
|---------------------|
常用变通方式:
dosomething().then(function () { return dosomethingelse();}).then(finalhandler);
dosomething
|-----------------|
dosomethingelse(undefined) //then外层函数的arguments[0]== resultofdosomething
|------------------|
finalhandler(resultofdosomethingelse)
|------------------|
错误方式1:
dosomething().then(function () { dosomethingelse();}).then(finalhandler);
dosomething
|-----------------|
dosomethingelse(undefined) //虽然dosomethingelse会返回promise对象,但最外层的回调函数是return undefined,所以下一个then方法无需等待新promise的状态,会马上执行回调。
|------------------|
finalhandler(undefined)
|------------------|
错误方式2:
dosomething().then(dosomethingelse()).then(finalhandler);
dosomething
|-----------------|
dosomethingelse(undefined) //回调函数在注册时就直接被调用
|----------|
finalhandler(resultofdosomething)
|------------------|
更多javascript中promise的使用。