nuxtjs中@/nuxtjs/axios如何设置全局拦截器

目录

 

一 安装

二 全局配置

 

三 使用

四 特点

 

五 拦截器封装的作用

六 注意

---

一 安装

如果你在一开始创建nuxt项目的时候，没有安装nuxtjs/axios，那么可以先进行安装,如果已经有了，就忽略这一步

使用npm：

npm install @ nuxtjs / axios

 使用yarn：

纱线添加@ nuxtjs / axios

二 全局配置

在nuxt.config.js 中进行全局的配置：

 

三 使用

 在plugins文件夹中新建一个axios.js文件

// 如果在插件里面需要获取到 nuxt 本身
// 需要 export default


import { Message } from 'element-ui';

export default function ({ $axios, redirect }) {
  // $axios.onError 是一个 nuxt 提供的辅助拦截器函数
  // 里面可以拦截到错误
  $axios.onError(err => {
    // 这里是每当出错的时候都会被拦截
    console.log(err);
    // 这个 err 是一个错误对象, log 的时候看不出来有什么用
    // 用 dir 可以看到里面的内容
    console.dir(err);
    console.log('错误信息是: ' + err.response.data.message);
    // 弹出一个提示告诉用户
    // this.$message.error('') 在这里由于不是组件内部, 没有 this 可以用
    // 可以单独引入element ui 当中的 Message 组件
    Message.error(err.response.data.message || '系统错误')

    // 如果需要跳转页面, 比如说需要跳转到登录页
    // 可以从 nuxt 中拿到 redirect 函数即可
    // redirect('/user/login')
  })
}

四 特点

• 无论是客户端还是server端，自动设置 base URL
• 在$axios 对象上暴露 setToken 函数方法，我们能轻而易举的设置 tokens
• 自动启用 withCredentials 特性 当请求发送到 baseURL 时
• SSR 模式下代理头信息（Useful for auth)
• Fetch 风格的请求
• 和Nuxt.js 的 Progressbar 完美结合
• 支持Proxy Module
• 自动重试机制 axios-retry

 

五 拦截器封装的作用

• 不封装，功能依旧可以实现
• 如果需要对每个页面请求的错误都进行处理一遍，可以通过统一的拦截，判断到有错误就进行统一的处理
• 开发的时候就只需要关注成功的逻辑即可

 

六 注意

• 使用@nuxtjs/axios 拦截器，就需要使用 nuxt/axios的方式发送请求，才会通过这个@nuxtjs/axios 设置的拦截器

• 如果使用以前的方式发送请求，就需要使用以前的方式设置拦截器（发送请求的方式和拦截器的设置要统一）

• 原版的 axios 写法是: axios.interceptors.response.use(回调函数)