Promise基本用法
对于Promise,我的理解来自此博客,https://blog.csdn.net/qq_34645412/article/details/81170576
这个博客对Promise用法进行了详细的解释。
为什么想到用Promise
在最近的项目中遇到了一个需求:在车辆进出围栏时显示报警信息。
在这个需求中遇到的一个问题:对车辆列表进行迭代,去调用一个服务器接口(判断车辆所在经纬度时否在围栏内)时会出现只回调了最后一次迭代结果。
产生的原因:异步请求的变量被下一次循环变量覆盖(循环比异步请求快)。
为了保证多个异步请求按序进行,我想到了Promise。
Promise是异步编程的一种解决方案,它可以在一定时间将所有请求结果保存。一共有三种状态:pending(进行态)、fulfilled(成功态)、rejected(失败态)。而pengding最终会变成fulfilled或者rejected,且改变后状态就不会再发生变动。
如何使用Promise解决产生的问题
Promise是一个构造函数,需要通过new Promise()进行构造:
let p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
resolve('要返回的数据');
}, 2000);
});
定义一个successAjax列表用来存储resolve返回的数据,调用方法如下:
this.successAjax.push(this.isIn('参数'));
isIn('参数') {
const _this = this;
return new Promise(function(resolve, reject) {
//调用相关接口
$http.XXX('参数').then(res => {
const dataList = {
msg: res.data,
};
resolve(dataList);//将请求结果回调
});
});
}
在所有车辆数据迭代完成后,对进入围栏的车辆进行报警提示。
Promise.all(this.successAjax).then(value => {
for (let j = 0; j < value.length; j++) {
if (value[j].msg == "0") {
//进行报警提示
}
}
});
Promise.all 是在所有异步操作执行完成后并且执行结果都为成功时才进行回调,而我访问的接口一定会返回一个是否进入的结果。也可通过Promise.then()进行回调。