当前位置:网站首页>请求/响应拦截器写法
请求/响应拦截器写法
2022-08-01 04:58:00 【tingkeiii】
写请求拦截器、响应拦截器的request.js内容如下:
import axios from 'axios'
import { getToken ,removeToken} from '@/utils/auth.js'
// 按需引入element的消息弹窗
import {Message,MessageBox} from 'element-ui'
//配置请求的基础url以及响应超时时间
axios.defaults.baseURL = '请求的公共地址'
axios.defaults.timeout = 30 * 1000
//请求拦截器,在请求头里添加TOKEN
axios.interceptors.request.use(config => {
if(getToken()) {
// 配置请求头的token授权
config.headers.Authorization = getToken()
}
// 必须要返回config
return config
},
//参数二,对错误请求做什么
error => {
console.log('请求出错,错误是' + error)
//返回一个失败状态promise
return Promise.reject(error)
},
)
//响应拦截器,对于响应过滤
axios.interceptors.response.use(res => {
// 获取到状态码
const status = res.data.meta.status
//获取响应提示信息
const msg = res.data.meta.msg
//状态码401,说明需要用户重新登陆授权
if (status === 401) {
MessageBox('登陆已过期,请重新登陆', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
// 重新登陆之前需要:1.清除cookies中的token 2.跳转登录页 3.刷新页面以清空vuex数据
if(getToken()){
removeToken();
}
this.$router.push({ path: '/login' })
location.reload()
})
}
// 响应的结果有报错
else if (status !== 200) {
Message.error(msg)
// 返回一个失败状态的promise
return Promise.reject('出错了')
}
// 若正常响应,则返回响应结果
else {
Message({
message: msg,
type: 'success',
})
return res.data
}
},
//没网,不能成功发起请求
()=>{
Message({
message: '请检查网络!',
type: 'error',
})
return Promise.reject('出错了')
})
// 一定要返回实例
export default axios
边栏推荐
猜你喜欢

scheduleWithFixedDelay和scheduleAtFixedRate的区别

(2022 Nioke Duo School IV) H-Wall Builder II (Thinking)

Mysql基础篇(Mysql数据类型)

Power button (LeetCode) 212. The word search II (2022.07.31)

力扣(LeetCode)212. 单词搜索 II(2022.07.31)

【目标检测】YOLOv7理论简介+实践测试

(2022牛客多校四)H-Wall Builder II(思维)

干货!如何使用仪表构造SRv6-TE性能测试环境

FFmpeg 搭建本地屏幕录制环境

深圳某游戏研发公司给每个工位都装监控,网友:堪比坐牢!
随机推荐
typescript26 - literal types
High Numbers | 【Re-integration】Line Area Score 880 Examples
typescript28-枚举类型的值以及数据枚举
怀念故乡的面条
C# | 使用Json序列化对象时忽略只读的属性
I met a shell script
LeetCode 1189. “气球” 的最大数量
云服务器下载安装mongo数据库并远程连接详细图文版本(全)
冲刺金九银十,Android开发面试(内含面试资料|面试题|源码)
PAT class B 1001 (3n+1) conjecture
这里有110+公开的专业数据集
ModuleNotFoundError: No module named 'tensorflow.keras' error message solution
【愚公系列】2022年07月 Go教学课程 024-函数
(2022牛客多校四)K-NIO‘s Sword(思维)
MySQL Practice Summary -
【堆】小红的数组
56:第五章:开发admin管理服务:9:开发【文件上传到,MongoDB的GridFS中,接口】;(把文件上传到GridFS的SOP)
Immutable
25. Have you been asked these three common interview questions?
数组问题之《下一个排列》、《旋转图像》以及二分查找之《搜索二维矩阵》