NUXT的asyncData方法中如何使用axios做并发请求？

Question

现在这使用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截图：

Answer 1

自问自答一下：

// 错误代码
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的解构赋值等概念印象不深，所以犯了这个错误

Answer 2

我很疑惑对于 let data = await axios.get('/api/users')，这样的代码，
其中的url路径是相对的，难道不会报错吗？我在开发测试的时候，像上面的相对url写法一直都在报错，当我改成http前缀的时候，报错便消失了，运行正常。

到后面我才发现对于asyncData 这样的方法，是Nuxt提供的，这个将会在服务端渲染的时候执行，所以相对url是无法找到资源的，我也不知道这样的理解是否正确，如果在将来我有所新的认识会回来修正回答，也希望熟悉的朋友能够指正，不过我目前不打算用Nuxt了，对于我这样的初学者感觉坑太多了，很多基础的知识都不知道。

Answer 3

我可能会用Promise给处理一下， 下面是示例代码，没有运行测试过

asyncData (app) {

return new Promise((resolve, reject)=> {
    Axios.all(axios.get('/api/users'),axios.get('/api/users')).then((res1, res2) => {
        resolve({res1,res2})
    }).catch((err1, err2) => {
       reject(err1, err2)
    })
})
}

用的时候

created () {
    xxx.asyncData(this).then((res1,res2) => {
        // 这里是两个接口全部完成了
    }).catch((err1, err2) => {
        // 这儿是出错了
    })
}