vue3+ts完成axios封装

最新推荐文章于 2025-03-06 10:45:00 发布

36氪（36Kr）广播

最新推荐文章于 2025-03-06 10:45:00 发布

阅读量1.2k

点赞数 12

分类专栏：程序员文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qinglp/article/details/138849475

版权

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则在请求头中携

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

36氪（36Kr）广播

关注关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3.0+ts 封装axios

zy991315的博客

07-03

871

vue3.0+ts 封装axios

vue3+ts项目，axios封装

Shining_F的博客

09-14

1437

vue3+ts， axios封装

参与评论您还未登录，请先登录后发表或查看评论

Vue 3 中基于 Axios 的请求封装实践

最新发布

weixin_70543642的博客

03-06

437

在 Vue 3 项目中，封装请求模块是提高代码复用性和可维护性的重要步骤。通过封装 Axios，我们可以统一处理请求头、Token、错误处理和数据加密等逻辑，从而避免重复代码并提升开发效率。通过封装 Axios，我们实现了一个高效、灵活且易于维护的请求模块。：如果需要支持 Token 刷新，可以在响应拦截器中捕获 401 状态码并自动刷新 Token。：在响应拦截器中统一处理错误，避免在组件中重复编写错误处理逻辑。：如果遇到跨域问题，可以在后端配置 CORS 或通过代理解决。：通过 Axios 实例设置。

Axios封装：Vue3+TS

m0_52775179的博客

11-29

730

安装axios依赖，安装element-plus，用来反馈请求结果。，会自动创建一个axios实例。我们在同目录下，新建一个。在使用时，我们需要在API文档中导入。

Vue3+TS封装axios

qq_55928824的博客

01-04

4496

Vue3+TS封装axios

vue3+TS项目的axios封装

asfsdfh的博客

06-26

1328

在vue项目中与后台进行数据交互的时候，我们通常用到的是axios库。

vue3+ts+less+vite+pinia+axios基础封装项目模版

03-26

Vue 3 Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及Composition API等。使用Vue 3，开发者可以更加高效地构建用户界面，并享受更好的开发体验。 ...

react + ts or vue + ts 通用axios封装的方法。

07-21

3. **封装axios实例**：在`requestMode.ts`文件中，创建一个axios实例，并添加通用配置。可以在这里设置基础URL、请求超时等全局配置。 ```typescript import axios from 'axios'; const instance = axios.create...

vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装上手即用

08-19

vue3+TS+axios+route+element plus 可二次开发的模板，包括请求使用方法，完美封装上手即用

vue3+ts封装axios

qq_41026858的博客

06-15

2137

vue3+ts封装axios

Vue3:TS封装axios

qq_45061461的博客

02-21

1282

/抛出get请求: any){

Vue3 + Ts 封装axios

qq_35624605的博客

11-01

4985

封装思路 index.ts 我们需要在src的根目录下创建一个axios文件夹，其中创建一个index.ts文件，这个文件主要用来封装axios的配置（实例化请求配置、请求拦截器、相应拦截器）及相应的方法（登录跳转、消息提示、错误处理等） base.ts 这个文件主要用于项目扩展的情况下不同模块需要调用不同接口（请求的base地址 baseURL ）而前期做的准备，便于后期的维护 request.ts 主要用于封装基于axios配置的get/post/put/delete等使用方法。 api.ts 在后面

vue3+TS封装axios

m0_56561602的博客

07-07

601

vue3+ts封装axios

vue3+ ts axios封装

Roomaway的博客

03-10

267

【代码】vue3+ ts axios封装。

【vue3+ts】封装axios

drawback12138的博客

08-12

956

如何vue3+ts的项目中封装axios

vue3+ts 封装axios

henbang_bang的博客

10-26

1006

对 axios 进行二次封装

vue3+ts 封装 axios

04-23

Vue 3是一种流行的JavaScript框架，而TypeScript是一种类型安全的JavaScript的超集。封装axios是在Vue 3项目中使用TypeScript来封装axios库，以便更好地管理和使用网络请求。在Vue 3 + TypeScript中封装axios，可以按照以下步骤进行： 1. 安装axios和@types/axios： ``` npm install axios @types/axios ``` 2. 创建一个api.ts文件，用于封装axios请求： ```typescript import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; // 创建一个axios实例 const instance = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config: AxiosRequestConfig) => { // 在发送请求之前做一些处理，例如添加token等 return config; }, (error: any) => { // 处理请求错误 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response: AxiosResponse) => { // 对响应数据进行处理，例如统一处理错误码等 return response.data; }, (error: any) => { // 处理响应错误 return Promise.reject(error); } ); // 封装get请求 export function get(url: string, params?: any): Promise<any> { return instance.get(url, { params }); } // 封装post请求 export function post(url: string, data?: any): Promise<any> { return instance.post(url, data); } ``` 3. 在Vue组件中使用封装的axios请求： ```typescript import { defineComponent } from 'vue'; import { get, post } from './api'; export default defineComponent({ methods: { fetchData() { get('/api/data').then((response) => { // 处理响应数据 }).catch((error) => { // 处理请求错误 }); }, postData() { post('/api/data', { name: 'example' }).then((response) => { // 处理响应数据 }).catch((error) => { // 处理请求错误 }); }, }, }); ``` 以上就是在Vue 3 + TypeScript中封装axios的基本步骤。通过封装，可以更好地管理和复用网络请求代码，并且可以在请求拦截器和响应拦截器中进行统一处理。同时，使用TypeScript可以提供类型检查和自动补全的功能，提高代码的可靠性和开发效率。