vue.js - NUXT的asyncData方法中如果使用axios做并发请求？

问题描述

问 题

现在这使用vue的NUXT框架在服务端渲染，使用asyncData方法遇到了并发请求的问题，如果有多个并发请求应该怎么写，按照axios文档写一直报错，该问题如果使用客户端渲染正常执行。

暂时使用的方法：

async asyncData (app) {
    let data = await axios.get('/api/users')
    let msg = await axios.get('/api/users')
    return {
      users: data.data,
      msg: msg.data
    }
  },

这里是报错的代码：

async asyncData (app) {
    function getUserAccount() {
      return axios.get('/user/12345');
    }
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        return {
          users: acct,
          msg: perms
        }
      }));
  },

该代码被webpack解析后：

getUserAccount = function getUserAccount() {
    return __WEBPACK_IMPORTED_MODULE_2__plugins_axios__["a" /* default */].get('/user/12345');
};

 __WEBPACK_IMPORTED_MODULE_2__plugins_axios__["a" /* default */].all([getUserAccount(), getUserPermissions()]).then(__WEBPACK_IMPORTED_MODULE_2__plugins_axios__["a" /* default */].spread(function (acct, perms) {
    return {
      users: acct,
      msg: perms
    };
}));

报错截图：

下面代码执行后变量为undefined：

async asyncData () {
    let {pageRes, countRes} = await Promise.all([
      axios.get('/api/users'),
      axios.get('/api/users')
    ])
    return {
      users: pageRes,
      msg: countRes
    }
 },
created () {
    console.log(this.users)
    console.log(this.msg)
  }

console.log截图：

解决方案

自问自答一下：

// 错误代码
let {pageRes, countRes} = await Promise.all([
  axios.get('/api/users'),
  axios.get('/api/users')
])
// 正确
let [pageRes, countRes] = await Promise.all([
  axios.get('/api/users'),
  axios.get('/api/users')
])

问题在于 await 后面的是个数组而不是json,所以用{}就错了，应该用[],只能说自己对ES6的解构赋值等概念印象不深，所以犯了这个错误

这篇关于vue.js - NUXT的asyncData方法中如果使用axios做并发请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！