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开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
更多推荐
所有评论(0)