目录
一 安装
如果你在一开始创建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(回调函数)