没有合适的资源?快使用搜索试试~ 我知道了~
首页vue+ts下对axios的封装实现
vue+ts下对axios的封装实现
19 下载量 2 浏览量
更新于2023-03-03
评论 1
收藏 78KB PDF 举报
主要介绍了vue+ts下对axios的封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
资源详情
资源评论
资源推荐
vue+ts下对下对axios的封装实现的封装实现
主要介绍了vue+ts下对axios的封装实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定
的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
虽然vue中axios的使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达
到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态码的处理.那么我基于自
己的需求简单分装了一下.(之前很少接触vue,主要用的ng和react,这次新项目想用vue来弄,熟悉一下vue的一些新特性和方法,有
啥不对的,欢迎大家批评指正)
前提: 熟悉前端ts, node等等.
1. 安装安装axios
npm install axios -D
2. 拦截器及全局方法编写拦截器及全局方法编写
一个http.ts文件进行自己http逻辑的封装,为了代码分离,我同时创建interceptors.ts文件进行拦截器逻辑,放在一起也行.
interceptors.ts(拦截器,进行请求和响应拦截并进行部分逻辑处理)
import axios from 'axios';
import {message} from 'ant-design-vue'; // 这是我引入的antd的组件库,为了方便弹出吐司
export class Interceptors {
public instance: any;
constructor() {
// 创建axios实例
this.instance = axios.create({timeout: 1000 * 12});
// 初始化拦截器
this.initInterceptors();
}
// 为了让http.ts中获取初始化好的axios实例
public getInterceptors() {
return this.instance;
}
// 初始化拦截器
public initInterceptors() {
// 设置post请求头
this.instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/**
* 请求拦截器
* 每次请求前,如果存在token则在请求头中携带token
*/
this.instance.interceptors.request.use(
(config) => {
// 登录流程控制中,根据本地是否存在token判断用户的登录情况
// 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码
if (config.headers.isJwt) {
const token = localStorage.getItem('id_token');
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
}
return config;
},
(error) => {
console.log(error);
},
);
// 响应拦截器
this.instance.interceptors.response.use(
// 请求成功
(res) => {
if (res.headers.authorization) {
localStorage.setItem('id_token', res.headers.authorization);
} else {
if (res.data && res.data.token) {
localStorage.setItem('id_token', res.data.token);
}
weixin_38684806
- 粉丝: 4
- 资源: 898
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- stc12c5a60s2 例程
- Android通过全局变量传递数据
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0