通过Promise解决多个异步请求不能按序进行的问题

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()进行回调。