axios全局拦截器在vue和nuxt.js的区别-前端-ICode联盟

Vue

在 Vue 中是使用的原生 axios 拦截器 interceptors.response.use 方法，先创建一个 axios 实例 request ：

const request= axios.create({
  baseURL: process.env.VUE_APP_BASE_API
  timeout: 5000
})

再注册全局拦截器：

// 请求拦截器
request.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => { 
    // 正常响应
    const res = response.data
    return res
  },
  error => {
    // 响应异常
    return Promise.reject(error)
  }
)

export default request

以上代码全部写在一个 .js 文件内：request.js 即可，api 单独管理，导入本文件即可使用 axios 对象进行请求。

Nuxt

在 axios 中使用 @nuxtjs/axios 即可自动创建 axios 实例，安装后进行 nuxt.config.js 配置：

  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    proxy: true, //开启代理转发
    prefix: '/dev-api' 
  },
  
  // 代理转发 
  proxy: { 
    '/dev-api': {
      target: '目标网址',
      pathRewrite: {'^/dev-api': ''}
    }
  },

  plugins: [
    '~/plugins/interceptor.js'
  ],

如此将代理转发也开启，防止跨域问题。

之后进行全局拦截器配置，创建一个 plugins/interceptor.js ：

export default({store, route, redirect, $axios}) => {

    $axios.onRequest(config => {
        // console.log("请求拦截器")
		if (process.client) {
			// 用户端
		}

    	if (process.server) {
    		// 服务端
        }
        return config
    })

    $axios.onResponse(response => {
        // console.log('响应拦截器：', response)
        return response
    })

    $axios.onError(error => {
        // console.log('响应异常')
        const code = parseInt(error.response && error.response.status)      
    	// switch (code) 分情况处理
    })

}

这是官方推荐的方法，我们也可以在这里使用原生的 $axios.interceptors.response.use 方法，但是没有必要。

如果想要了解更多 nuxt 的 axios 配置，请查看官方文档：@nuxtjs/axios

总结

对比 vue 和 nuxt 的 axios 区别可以发现：

nuxt 的 axios 默认初始化好了，只需要使用官方推荐的拦截方法即可，而且支持原生方法，而 vue 是纯原生操作需要自己初始化。
在 nuxt 中可能有服务端进行 axios 请求，也有可能是用户端进行 axios 请求，所以必须做好判断处理，避免内部错误使用方法。