最近在项目中要用到拦截器，坦白说是第一次听说这玩意，所以资料查了好久，现在也算是明白了拦截器的作用。我的理解就是拦截每一次你的请求和响应，然后进行相应的处理。比如一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复，所以我们需要用到拦截器
在src目录下的api目录创建一个js文件
import axios from 'axios' //引入axios
//下面这两个不一定需要引入，看你项目需要拦截的时候做什么操作，但是一般都需要引入store
import store from '@/store/index' //引入store
import router from '@/router' //引入router
创建一个axios实例
let instance = axios.create({
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
编写请求拦截器
这个拦截器会在你发送请求之前运行
我的这个请求拦截器的功能是为我每一次请求去判断是否有token，如果token存在则在请求头加上这个token。后台会判断我这个token是否过期。
// http request 拦截器
instance.interceptors.request.use(
config => {
const token = sessionStorage.getItem('token')
if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = token //请求头加上token
}
return config
},
err => {
return Promise.reject(err)
})
响应拦截器
// http response 拦截器
instance.interceptors.response.use(
response => {
//拦截响应，做统一处理
if (response.data.code) {
switch (response.data.code) {
case 1002:
store.state.isLogin = false
router.replace({
path: 'login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
}
return response
},
//接口错误状态处理，也就是说无响应时的处理
error => {
return Promise.reject(error.response.status) // 返回接口返回的错误信息
})
最后把实例导出就行了
export default instance
在需要的页面导入就可以使用了
import instance from './axios'
/* 验证登陆 */
export function handleLogin (data) {
return instance.post('/ds/user/login', data)
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Axios 二次封装</title> <link crossorigin="anonymous" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css" rel="stylesheet"> <script crossorigin="anonymous" src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script> <script crossorigin="anonymous" src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> </head> <body> <div> <button onclick="getUsers()">获取用户列表</button> <button onclick="getRepos()">获取仓库列表</button> </div> <!-- 测试接口1: https://api.github.com/search/repositories?q=v&sort=stars 测试接口1: https://api.github.com/search/users?q=v --> <!-- 1). 统一进行请求配置: 基础路径/超时时间等 2). 请求过程中loading提示 3). 请求可能需要携带token数据 4). 请求成功的value不再是response, 而是response.data 5). 请求失败/出错统一进行处理, 每个请求可以不用单独处理 --> <script> //配置默认的基础路径和超时时间 axios.defaults.baseURL = 'https://api.github.com'; axios.defaults.timeout = 3000; //添加可能的 token 信息 (在请求头中) // axios.defaults.headers = { // token: "H5200318" // } //请求拦截器 axios.interceptors.request.use(config => { NProgress.start(); return config; }, error=>{ }) //响应拦截器处理结果 axios.interceptors.response.use(response=>{ //停止顶部的进度条 NProgress.done(); //返回成功的值为 response.data return response.data; }, error => { //在这里统一处理错误 console.log(error,'处理错误'); //错误不向下继续传递, 用户无需指定失败的回调 return new Promise((resolve, reject)=>{}); }) // token 指的是验证的字段(标志), 服务器端可以根据 token 验证客户端的身份 access_token function getUsers() { //这里只设置成功的回调 axios.get('/search/reposito').then(response => { console.log(response); }); } function getRepos(){ axios.get('/search/users?q=v').then(response => { console.log(response); }) } // NProgress.start(); // setTimeout(() => { // NProgress.done(); // }, 3000) </script> </body> </html>
原文链接：https://www.jianshu.com/p/a0c67f4e145e