异步执行的封装
使用Promise
的对象封装异步请求,使用resolve
和reject
分别包装正常返回和异常返回的值和信息。
例如,执行一段网络请求:
async getMovieData(){
let promise = new Promise(function (resolve, reject) {
fetch(REQUEST_URL)
.then(function (response) {
return response.json();
})
.then(function (responseData) {
resolve(responseData);
})
.catch(function (error) {
reject(error)
})
})
return promise;
}
然后,在调用处进行通过then
和catch
操作返回相关的信息:
let movieData = RequestUtils.getMovieData();
movieData.then(function (responseData) {
alert(responseData.movies);
}).catch(function (errorMessage) {
alert('错误的信息是:' + errorMessage);
})
这里要额外的注意上下文对象的区分
let movieData = RequestUtils.getMovieData();
movieData.then(function (responseData) {
globalComponent.setState({
dataSource: globalComponent.state.dataSource.cloneWithRows(responseData.movies),
loaded: true
})
}).catch(function (errorMessage) {
//alert('错误的信息是:' + errorMessage);
globalComponent.setState({
loaded: false,
errorMsg: errorMessage
})
});
这里的全局的globalComponent
对象实在constructor
构造中实例化的
// 构造
constructor(props) {
super(props);
// 初始状态
globalComponent = this;
...
}
All
promise.all([...])
对数组中的Promise
全部进行处理,只有其中所有的对象返回onFulFilled
或者onRejected
方法的时候,该all方法才会进行返回
Race
Promise.race([...])
对数组中的Promise
进行竞速处理,例如:
var winnerPromise = new Promise(function (resolve) {
setTimeout(function () {
console.log('this is winner');
resolve('this is winner');
}, 4);
});
var loserPromise = new Promise(function (resolve) {
setTimeout(function () {
console.log('this is loser');
resolve('this is loser');
}, 1000);
});
// 第一个promise变为resolve后程序停止
Promise.race([winnerPromise, loserPromise]).then(function (value) {
console.log(value); // => 'this is winner'
});
最终程序的结果是:
this is winner
this is winner
this is loser
需要注意的是,每个参与竞速(race)的promise对象本身都会进行处理,但是,一旦一种某个预先返回了数据,那么其他的promise的对象将不会调用onFulFilled
或者onRejected
方法以进行下一步回调。
何时进行onRejected
以下两种情况:
function throwError(value) {
// 抛出异常
throw new Error(value);
}
// <1> onRejected不会被调用
function badMain(onRejected) {
return Promise.resolve(42).then(throwError, onRejected);
}
// <2> 有异常发生时onRejected会被调用
function goodMain(onRejected) {
return Promise.resolve(42).then(throwError).catch(onRejected);
}
// 运行示例
badMain(function(){
console.log("BAD");
});
goodMain(function(){
console.log("GOOD");
});
其中<1>中的并不能在打印出log,但是<2>是可以的。
在本promise实现中进行的error错误只能被后面链中的catch进行抓获。