並行請求 免錯 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
    }
  }
}