并行请求 免错 promise.all

解决问题

• async/await 会将异步任务去同步化执行，上一个异步任务没结束之前，下一个异步任务处于等待状态中。这样需要等待3个异步任务，假设这些请求均耗时1秒，也就是说页面至少要等待3秒后才会出现内容

• 利用 Promise.all 将这些请求并行发送，就能解决上述的问题。Promise.all 接受一个 Promise 数组作为参数，当全部 Promise 成功时会返回一个结果数组。最终的耗时会以最久的 Promise 为准，所以说原本3秒的耗时可以降低到1秒。

• 需要注意的是，如果其中有一个请求失败了，会返回最先被 reject 失败状态的值，导致获取不到数据。

封装基础请求时做了 catch 错误的处理，确保请求都不会被 reject

axios.js reject抛出错误

export default function ({ app: { $axios, $cookies } }) {
	$axios.defaults.baseURL = process.env.baseUrl
	$axios.defaults.timeout = 30000
	$axios.interceptors.request.use(config => {
		config.headers['X-Token'] = $cookies.get('token') || ''
		config.headers['X-Device-Id'] = $cookies.get('clientId') || ''
		config.headers['X-Uid'] = $cookies.get('userId') || ''
		return config
	})
	$axios.interceptors.response.use(response => {
		if (/^[4|5]/.test(response.status)) {
			return Promise.reject(response.statusText)
		}
		return response.data
	})
}

request.js catch捕获结果

export default ({ app: { $axios } }, inject) => {
  let requestList = {}
  let methods = ['get', 'post', 'put', 'delete']
  methods.forEach(method => {
    let dataKey = method === 'get' ? 'params' : 'data'
    requestList[method] = function(url, data) {
      return $axios({
        method,
        url,
        [dataKey]: data
      }).catch(err => {
        console.error(err)
        return {
          s: 0,
          d: {},
          errors: [err]
        }
      })
    }
  })
  inject('request', requestList)
}

Promise.all 并行请求

export default {
  asyncData() {
    // 数组解构获得对应请求的数据
    let [indexData, recommendAuthors, recommendBooks] = await Promise.all([
      // 文章列表
      app.$api.getIndexList({
        first: 20,
        order: 'POPULAR',
        category: 1
      }).then(res => res.s == 1 ? res.d : {}),
      // 推荐作者
      app.$api.getRecommendAuthor({ 
        limit: 5
      }).then(res => res.s == 1 ? res.d : []),
      // 推荐小册
      app.$api.getRecommendBook().then(res => res.s === 1 ? res.d.data : []),
    ])
    return {
      indexData,
      recommendAuthors,
      recommendBooks
    }
  }
}