当前位置:网站首页>请求/响应拦截器写法
请求/响应拦截器写法
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
边栏推荐
- 数组问题之《两数之和》以及《三数之和 》
- API Design Notes: The pimpl trick
- typescript24 - type inference
- typescript23-tuple
- The Principle Of Percona Toolkit Nibble Algorithm
- (2022牛客多校四)N-Particle Arts(思维)
- [target detection] YOLOv7 theoretical introduction + practical test
- pytorch、tensorflow对比学习—功能组件(激活函数、模型层、损失函数)
- High Numbers | 【Re-integration】Line Area Score 880 Examples
- typescript20-接口
猜你喜欢

剑指 Offer 68 - I. 二叉搜索树的最近公共祖先

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

故乡的素描画

typescript24-类型推论

The difference between scheduleWithFixedDelay and scheduleAtFixedRate

【无标题】

ICML2022 | Deep Dive into Permutation-Sensitive Graph Neural Networks

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

pytroch、tensorflow对比学习—功能组件(数据管道、回调函数、特征列处理)

typescript28 - value of enumeration type and data enumeration
随机推荐
2022年超全的Android面经(附含面试题|进阶资料)
出现Command ‘vim‘ is available in the following places,vim: command not found等解决方法
Swastika line-by-line parsing and realization of the Transformer, and German translation practice (2)
(2022 Nioke Duo School IV) H-Wall Builder II (Thinking)
【云原生之kubernetes实战】kubernetes集群的检测工具——popeye
pytorch、tensorflow对比学习—张量
PMP 80个输入输出总结
【愚公系列】2022年07月 .NET架构班 085-微服务专题 Abp vNext微服务网关
程序员代码面试指南 CD15 生成窗口最大值数组
风险策略调优中重要的三步分析法
ICML2022 | Deep Dive into Permutation-Sensitive Graph Neural Networks
The method of solving stored procedure table name passing through variable in mysql
博客系统(完整版)
Lawyer Interpretation | Guns or Roses?Talking about Metaverse Interoperability from the Battle of Big Manufacturers
(2022牛客多校四)A-Task Computing (排序+动态规划)
(2022 Niu Ke Duo School IV) K-NIO's Sword (Thinking)
UE4 rays flashed from mouse position detection
pytroch、tensorflow对比学习—功能组件(数据管道、回调函数、特征列处理)
25. 这三道常见的面试题,你有被问过吗?
Mysql基础篇(约束)