在做项目的过程中,可能会出现这样的场景:某个模块的数据后端是通过好几个接口分开给前端的,所以前端需要拿到数据后对数据进行组装,然后再进行一次性渲染,这种情况下,如果按照正常的异步请求,就可能会导致有的数据展示不出来,因为每个接口请求完成的先后顺序是不固定的,于是就想到了变异步为同步,这样就能够保证最终渲染的数据是完整且正确的,但是使用了同步请求,就会导致数据加载时间过长,影响性能;于是乎~就想到了并行请求Axios.all()
(所有请求同时进行,并且所有请求全部完成后再对数据进行处理),如下:
下面是官方例子
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (resp1, resp2) { // spread是将各请求结果拆分返回,如果不使用改方法,则最后的相应结果为一个数组[resp1, resp2]
// 两个请求现在都执行完成
}));
因为我在项目中对
Axios
的请求再次进行了一次封装,所以导致我在使用axios.all
的时候无法获取到所有接口的请求结果,这里我提醒一下大家,避免大家再次采坑:
注:
- 在定义的请求的方法中一定一定一定要将
axios.get
方法return
出去,并且不要写回调方法then
;- 如果对
axios
的请求进行了封装,则每一步都得return
出去