查看服務(wù)端請(qǐng)求

• axios 使用引入
  nuxt 默認(rèn)是集成了 @nuxtjs/axios 不需要單獨(dú) npm 或 import ，直接 import 是可以使用的但是在每次請(qǐng)求使用的都是單獨(dú)的一個(gè) axios 實(shí)例，在使用攔截器統(tǒng)一處理時(shí)會(huì)出現(xiàn)問(wèn)題。
• 在 axios 中統(tǒng)一處理
  在一些線上問(wèn)題的處理時(shí)，需要看到請(qǐng)求的發(fā)送和返回值。由于服務(wù)端渲染，所以在瀏覽器的 network 中是看不到的，想要找一個(gè)地方統(tǒng)一處理，所以選擇在 axios 的攔截器進(jìn)行處理，將請(qǐng)求的信息存儲(chǔ)在 vuex 中，在需要的時(shí)候在控制臺(tái)執(zhí)行封裝好的方法來(lái)展示。

在攔截器中執(zhí)行 vuex 中的 saveRequest 方法存儲(chǔ)請(qǐng)求相關(guān)內(nèi)容，此處使用 lodash 的節(jié)流函數(shù)防止頻繁的請(qǐng)求帶來(lái)性能問(wèn)題的可能。

export default ({ app, store, redirect, $axios }, inject) => {
  // http響應(yīng)攔截器
  $axios.interceptors.response.use(data => {
    const fn = app.lodash.throttle((o) => {
      store.commit('debug/saveRequest', o)
    }, 100)
    let obj = {
      method: data && data.request && data.request.method ? data.request.method : '',
      path: process && process.env && process.env.baseUrl && data && data.request? process.env.baseUrl + data.request.path : '',
      params: data && data.config && data.config.data ? data.config.data : '',
      data: data && data.data ? data.data : ''
    }
    if (obj.data) {
      fn(obj)
    }
    return data
  }, error => {
    return Promise.reject(error)
  })
}

Note: 使用 proxy 的時(shí)候需要注意，baseURL 和 proxy 不能一起工作，需要使用 prefix 代替。同時(shí)，與正常的 axios 不同的是還有一個(gè) browserBaseURL 參數(shù)默認(rèn)值是 baseURL（當(dāng) options.proxy 開(kāi)啟時(shí)為 prefix）， 文檔 中有詳細(xì)的解釋。

nuxtServerInit 中發(fā)送請(qǐng)求

需要在每個(gè)頁(yè)面初始化之前獲取需要的 uesrId，nuxtServerInit 應(yīng)該是一個(gè)很好的位置。nuxtServerInit中服務(wù)端調(diào)用時(shí)，上下文對(duì)象會(huì)作為第二個(gè)參數(shù)接收。

export const state = () => ({
  cityCode: null
})

export const actions = {
  async nuxtServerInit ({ commit, dispatch }, { req, route, redirect, $axios }) {
      userId = await dispatch('getUserId')
  },
  async getUserId ({ commit, state }) {
    try {
      let userId = await $axios.$post('http://tim.server.xxx.com/getWebUserId', {cityCode: state.cityCode, sourceClient: 'wap'})
      return userId && userId.result ? userId.result.rongyunUserId : ''
    } catch (err) {
      console.err('nuxtServerInit 獲取 id 報(bào)錯(cuò)', err)
    }
  }
}

封裝服務(wù)端使用的通用方法

在 plugins 中新建一個(gè)插件,將方法掛載在 app 上，使用時(shí) app.$Function 調(diào)用。在 plugins 中可以通過(guò) export default function(context) 中的參數(shù)獲取上下文對(duì)象

export default ({ app }, inject) => {
  // 轉(zhuǎn)化參數(shù)，去掉參數(shù)中的 null 和 空值
  function transformParameters (o) {
    let res = {}
    for(let [key, val] of Object.entries(o)) {
      if (val) {
        res[key] = val
      }
    }
    return res
  }
  app.transformParameters = transformParameters
}