在做项目的过程中,可能会出现这样的场景:某个模块的数据后端是通过好几个接口分开给前端的,所以前端需要拿到数据后对数据进行组装,然后再进行一次性渲染,这种情况下,如果按照正常的异步请求,就可能会导致有的数据展示不出来,因为每个接口请求完成的先后顺序是不固定的,于是就想到了变异步为同步,这样就能够保证最终渲染的数据是完整且正确的,但是使用了同步请求,就会导致数据加载时间过长,影响性能;于是乎~就想到了并行请求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的时候无法获取到所有接口的请求结果,这里我提醒一下大家,避免大家再次采坑:
注:

  1. 在定义的请求的方法中一定一定一定要将axios.get方法return出去,并且不要写回调方法then;
  2. 如果对axios的请求进行了封装,则每一步都得return出去
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐