vue+ts下对axios的封装实现_ts封装axios资源-CSDN文库

版权申诉

147 浏览量 2020-11-20 22:30:27 上传评论收藏 75KB PDF 举报

资源推荐

资源详情

资源评论

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);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

版权申诉

weixin_38674223

粉丝: 3
资源: 951

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip