在做个人项目的时候出现了一个很奇怪的问题：当你使用axios想要批量发送请求的时候，请求到的数据需要存入到数组，最后会发现怎么debug数组中都没有数据。

一、axios请求

封装好的axios的post请求

//post请求
export const post = (url, data, config = {}) => {
    return new Promise((resolve, reject) => {
      instance({
        method: 'post',
        url,
        data,
        ...config
      }).then(response => {
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }

二、错误示范

首先，主观的去使用for循环在循环体中使用axios去发送请求，将response返回的参数赋值给变量，然后存入数组中。

const data= ref({
		code:['1','2','3'],
		array:[]
})
//随便写个方法
const method = () =>{
    for(var i=0;i<data.value.code.length;i++){
	//发送post请求
	post(data.value.code[i]).then(res=>{
            data.value.array.push(res.data);
	}
    }
    console.log(data.value.array);
}

最后在控制台显示的信息是undefined，看到了就很气，找了半天也没发现东西跑哪去了。

三、正确做法

原因在于，按照我的理解，axios执行的是异步请求。异步请求不会实时的去执行then的内部语句（可能就被忽略了）。因此我们需要使用同步的方法，且把赋值的语句写到请求体外。（不知道是不是因为我写到循环体内了，下次调查看看）。

const data= ref({
		code:['1','2','3'],
		array:[]
})
//随便写个方法
const method = async () =>{
    for(var i=0;i<data.value.code.length;i++){
        //发送post请求
        var res= await post(data.value.code[i]).then(res=>{
                    return res.data;
	}
	data.value.array.push(res);
    }
    console.log(data.value.array);
}

这样就可以解决问题了，理解起来其实不难。

四、补充一个axios的官方并发使用

自己手动实现这个效果还是有点土的，改用axios的方法实现比较优雅。

// 创建一个请求地址数组
let arr = []
// 批量请求，批量进行结果处理
axios.all(arr).then(axios.spread(function (...data){
    for(let value of data){
        ...
    }
    successCallback()
}));