近期 nuxt 开发遇到的问题

查看服务端请求

• axios 使用引入
  nuxt 默认是集成了 @nuxtjs/axios 不需要单独 npm 或 import ，直接 import 是可以使用的但是在每次请求使用的都是单独的一个 axios 实例，在使用拦截器统一处理时会出现问题。
• 在 axios 中统一处理
  在一些线上问题的处理时，需要看到请求的发送和返回值。由于服务端渲染，所以在浏览器的 network 中是看不到的，想要找一个地方统一处理，所以选择在 axios 的拦截器进行处理，将请求的信息存储在 vuex 中，在需要的时候在控制台执行封装好的方法来展示。

在拦截器中执行 vuex 中的 saveRequest 方法存储请求相关内容，此处使用 lodash 的节流函数防止频繁的请求带来性能问题的可能。

export default ({ app, store, redirect, $axios }, inject) => {
  // http响应拦截器
  $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 的时候需要注意，baseURL 和 proxy 不能一起工作，需要使用 prefix 代替。同时，与正常的 axios 不同的是还有一个 browserBaseURL 参数默认值是 baseURL（当 options.proxy 开启时为 prefix）， 文档 中有详细的解释。

nuxtServerInit 中发送请求

需要在每个页面初始化之前获取需要的 uesrId，nuxtServerInit 应该是一个很好的位置。nuxtServerInit中服务端调用时，上下文对象会作为第二个参数接收。

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 报错', err)
    }
  }
}

封装服务端使用的通用方法

在 plugins 中新建一个插件,将方法挂载在 app 上，使用时 app.$Function 调用。在 plugins 中可以通过 export default function(context) 中的参数获取上下文对象

export default ({ app }, inject) => {
  // 转化参数，去掉参数中的 null 和 空值
  function transformParameters (o) {
    let res = {}
    for(let [key, val] of Object.entries(o)) {
      if (val) {
        res[key] = val
      }
    }
    return res
  }
  app.transformParameters = transformParameters
}