nuxt---错误请求拦截插件

• 目的:使用axios的拦截器拦截页面的所有请求错误，并弹出对应的提示。
• 普通vue的拦截器都放在 main.js 入口文件当中,引入 axios 之后, 创建 vue 实例之前
• nuxt 当中没有 main.js, 所以在 nuxt.config.js 的 plugins 数组里面配置了路径的文件都会在 vuejs 之前执行, 相当于以前 main.js 入口文件
• nuxtjs-axios|axios中文网

一、创建js

• plugins/axios.js文件

//如果在插件里面需要获取到nuxt本身
//需要export default
import { Message } from "element-ui";

//nuxt解构出axios
export default function ({ $axios, redirect }) {
    // $axios.onError是一个nuxt提供的辅助拦截器函数
    //里面可以拦截到错误
    $axios.onError(err => {
        //这里是每当出错的时候会被拦截
        //这个err是一个错误对象,log看不出来,用dir可以看内容
        console.dir(err)
        const { statusCode, message } = err.response.data;
        //弹出一个提示告诉用户
        //this.$message.error('')在这里由于不是组件内部,没有this可用
        //可以单独引入element-ui当中的Message
        if (statusCode === 400) {
            Message.error(message || '系统错误');
        }
        //如果需要跳转页面,比如说需要跳转到登录页
        //可以从nuxt中拿到redirect函数即可
        redirect('/user/login')
    })
}

二、调用插件

• utils/nuxt.config.js文件找到plugins,添加@/plugins/axios配置

plugins: [
    '@/plugins/element-ui',
    // '@/plugins/localStorage'
    //这里的引入如果是普通字符串,就在服务端马上运行
    //如果是要等到浏览器再运行的代码可以将配置改为对象,并且路径作为src传递
    {
      src: '@/plugins/localStorage',
      //如果只在浏览器加载的代码,可以添加属性ssr:false
      ssr: false
    },
    '@/plugins/axios'//添加配置
  ],

小结:

创建 axios 响应拦截插件的步骤

1. 创建文件
2. 在nuxt.config.js 配置引入文件
3. 在插件文件当中 暴露一个函数, 这个函数会被 nuxt 自动触发, 并且可以获得 整个nuxt 对象作为参数
4. 通过解构, 取得 $axios 之后就可以创建拦截器了
5. nuxt axios 插件 提供了一个方便的函数进行拦截器创建 onError
6. 在里面进行判断并且弹窗等操作