vue3+ts完成axios封装

2.axios封装

接下来我们使用class来封装，而不是传统的函数封装，因为类更具有可塑性，更加灵活。

2.1创建request.js

import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from ‘axios’;

import {message, notification} from ‘ant-design-vue’;

export class Request {

public static axiosInstance: AxiosInstance;

// constructor() {

// // 创建axios实例

// this.axiosInstance = axios.create({timeout: 1000 * 12});

// // 初始化拦截器

// this.initInterceptors();

// }

public static init() {

// 创建axios实例

this.axiosInstance = axios.create({

baseURL: ‘/api’,

timeout: 6000

});

// 初始化拦截器

this.initInterceptors();

return axios;

}

// 为了让http.ts中获取初始化好的axios实例

// public getInterceptors() {

// return this.axiosInstance;

// }

// 初始化拦截器

public static initInterceptors() {

// 设置post请求头

this.axiosInstance.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

/**

• 请求拦截器

• 每次请求前，如果存在token则在请求头中携带token

*/

this.axiosInstance.interceptors.request.use(

(config: AxiosRequestConfig) => {

// const token = Vue.ls.get(ACCESS_TOKEN)

// if (token) {

// config.headers[‘Authorization’] = 'Bearer ’ + token

// }

// 登录流程控制中，根据本地是否存在token判断用户的登录情况

// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token

// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码

// if (config.headers.isJwt) {

const token = localStorage.getItem(‘ACCESS_TOKEN’);

if (token) {

config.headers.Authorization = 'Bearer ’ + token;

}

// }

return config;

},

(error: any) => {

console.log(error);

},

);

// 响应拦截器

this.axiosInstance.interceptors.response.use(

// 请求成功

(response: AxiosResponse) => {

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

// }

// }

if (response.status === 200) {

// return Promise.resolve(response.data);

return response;

} else {

Request.errorHandle(response);

// return Promise.reject(response.data);

return response;

}

},

// 请求失败

(error: any) => {

const {response} = error;

if (response) {

// 请求已发出，但是不在2xx的范围

Request.errorHandle(response);

return Promise.reject(response.data);

} else {

// 处理断网的情况

// eg:请求超时或断网时，更新state的network状态

// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

// 关于断网组件中的刷新重新获取数据，会在断网组件中说明

ElMessage({

message: ‘网络连接异常,请稍后再试!’,

type: ‘success’,

})

}

});

}

/**

• http握手错误

• @param res 响应回调,根据不同响应进行不同操作

*/

private static errorHandle(res: any) {

// 状态码判断

switch (res.status) {

case 401:

break;

case 403:

break;

case 404:

ElMessage({

message: ‘请求的资源不存在’,

type: ‘warning’,

})

break;

default:

ElMessage.error(‘连接错误’);

}

}

}

2.2 main.ts中引入axios和request

import { createApp } from ‘vue’

import App from ‘./App.vue’

import { Request } from ‘@/service/request’

import VueAxios from ‘vue-axios’

import ElementPlus from ‘element-plus’

import ‘element-plus/dist/index.css’

import router from ‘./router’

import store from ‘./store’

import { components } from ‘./plugins/element-plus’

const app = createApp(App)

for (const cpn of components) {

app.component(cpn.name, cpn)

}

app.use(store)

app.use(router)

app.use(ElementPlus)

app.use(VueAxios, Request.init())

app.mount(‘#app’)

2.3 编写接口 api.js

import { Request } from ‘./request’

export function login (parameter: any) {

return Request.axiosInstance({

url: ‘/cxLogin’,

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
2816)]

[外链图片转存中…(img-V1PPBjE8-1715660852817)]

[外链图片转存中…(img-ljWiWNJG-1715660852817)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！