ajax处理异步和同步的问题

项目场景：

项目中多个请求，需要异步执行，但是在另外的请求中这些请求需要同步执行

---

问题描述：

这里只贴了重要部分的代码，项目通过getAllData函数将所有请求数据封装在一起。项目需求：getAllElevatorInfo、reqDeviceStatus和reqDeviceFaultList是三个异步请求，需要请求后端并处理数据，这里getAllElevatorInfo需要处理大量的数据。此后执行initMap初始化地图。问题：这四个方法都是异步进行的，但是initMap初始化的时候会报错数据未定义。

//获取全国各地设备位置信息
function getAllElevatorInfo(){
        $.ajax({
            url: "请求URL",
            type: "get",
            dataType: "json",
            success: function (data) {
            	//成功处理
            },
            error: function (e) {
            	//失败处理
            }
        });
}
//获取设备列表请求
function reqDeviceStatus(){
        $.ajax({
            url: "请求URL",
            type: "get",
            dataType: "json",
            success: function (data) {
            	//成功处理
            },
            error: function (e) {
            	//失败处理
            }
        });
}
//故障排行请求
function reqDeviceFaultList(){
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "请求URL",
            type: "get",
            dataType: "json",
            success: function (data) {
            	//成功处理
            },
            error: function (e) {
            	//失败处理
            }
        });
    })
}
//获取所有数据
function getAllData() {
    //首先获取数据，多个数据是异步的，但初始化地图是在多个数据获取之后再进行
    reqDeviceStatus();
    reqDeviceFaultList();
	getAllElevatorInfo();
    //初始化地图
    initMap();
}

---

原因分析：

这四个方法请求全部都是异步的，但是initMap中需要使用前三个请求回调的处理过的数据，由于都是异步的请求，前三个请求可能还未进行数据处理。就先初始化地图。

---

解决方案：

使用async/await进行处理函数，可以保证前三个请求是异步的同时，当前三个请求执行全部执行结束之后再执行最后一个请求。在这三个请求中，如果相互影响，可以在then方法中全部处理成功后执行。若相互独立，可以直接在ajax请求成功后执行，这样异步处理也可提高效率。示例代码如下：

//获取全国各地设备位置信息
function getAllElevatorInfo(){
   return new Promise((resolve, reject) => {
         $.ajax({
            url: "请求URL",
            type: "get",
            dataType: "json",
            success: function (data) {
            	//成功处理操作
				//...
				return resolve(data)
            },
            error: function (e) {
            	//失败进行统一处理
				return reject(e)
            }
        });
    });

}
//获取设备列表请求
function reqDeviceStatus(){
   return new Promise((resolve, reject) => {
        $.ajax({
            url: "请求URL",
            type: "get",
            dataType: "json",
            success: function (data) {
            	//成功处理操作
				//...
				return resolve(data)
            },
            error: function (e) {
            	//失败进行统一处理
				return reject(e)
            }
        });
    });
}
//故障排行请求
function reqDeviceFaultList(){
   return new Promise((resolve, reject) => {
         $.ajax({
            url: "请求URL",
            type: "get",
            dataType: "json",
            success: function (data) {
            	//成功处理操作
				//...
				return resolve(data)
            },
            error: function (e) {
            	//失败进行统一处理
				return reject(e)
            }
        });
    });
}
//获取所有数据
async function getAllData() {
    //首先获取数据，多个数据是异步的，但初始化地图是在多个数据获取之后再进行
    await Promise.all([reqDeviceStatus(), reqDeviceFaultList(),getAllElevatorInfo()])
    	//请求全部正常，data表示数组，对应每个请求返回的数据。
    	.then((data)=>{
    		//全部请求成功之后处理，若多个请求相互独立，可以直接在请求成功内部执行，此时不需要then()方法，这样异步执行也可以提高效率。
    	})
    	//异常统一处理
        .catch((e)=>{
            console.log(e)
        })
    //初始化地图
    initMap();
}