vue create my-vue3-project cd my-vue3-project vue add typescript npm install axios 2. 创建一个新的ts文件用于封装axios 在src目录下,创建一个新的TypeScript文件,例如src/plugins/axios.ts,用于封装axios。 3. 在封装的ts文件中,定义axios的实例并配置相关参数 在axios.ts文件中,我们需要导入axios,并...
1.src下新建api/index.ts文件,封装axios // api/index.tsimportaxios,{typeAxiosInstance,AxiosError,typeAxiosRequestConfig,typeAxiosResponse}from'axios'import{ElMessage}from'element-plus'import{typeResultData}from'./index.data'constbaseURL:string=import.meta.env.VITE_API_BASE_URLenumRequestEnums{TIMEOUT...
const service = axios.create({ timeout: 30000, headers: { get: ['Content-Type': 'application/x-; charset=utf-8'], post: ['Content-Type': 'application/json;charset=utf-8'] } }); ``` 封装请求方法: ```javascript export function httpGet(url, params = {}) { return axios.get(url...
api.ts进行接口API的统一管理 axios.ts封装请求配置拦截器 status.ts管理接口返回状态码 三、axios.ts 代码内逐行解释 代码语言:javascript 复制 importaxiosfrom'axios';import{showMessage}from"./status";// 引入状态码文件import{ElMessage}from'element-plus'// 引入el 提示框,这个项目里用什么组件库这里引什么/...
一、axios请求的封装(TS版) 1.JwtService 代码语言:javascript 复制 constID_TOKEN_KEY="id_token"asstring;/** * @description 从localStorage获取令牌 */exportconstgetToken=():string|null=>{returnwindow.localStorage.getItem(ID_TOKEN_KEY);};/** * @description 将令牌保存到本地存储 * @param token:...
需要安装 axios,qs yarn add axios npm i axios cnpm i axios yarn add qs npm i qs cnpm i qs 在src/API/axios.ts import axiosfrom'axios'; import qsfrom"qs"; axios.defaults.baseURL="/api";//请求地址统一配置到vite.config.ts中代理axios.defaults.headers.post["Content-Type"] ="application/...
Service封装: MediaService.ts import Axios from 'http'; import type { HttpResponse } from'./HttpResponse'; import type { AxiosProgressEvent } from'axios';export class MediaService {/** * 上传文件*/static async UploadFile(data: any): Promise<HttpResponse<any>>{ ...
封装axios,主要是通过拦截器分别处理HTTP请求和响应,并反馈HTTP请求结果 使用案例 安装依赖 安装axios依赖,安装element-plus,用来反馈请求结果 npmi axios,element-plus 封装axios 新建index.ts文件: 需要定义请求返回的数据格式,这个可以和服务端约定好数据格式 ...
@TOCTypeScript封装axios——Vue3+Ts实践 简介 最近在用Vue3 + TypeScript 重构一个Vue2项目,之前项目中用到axios来发送网络请求,进行前后端交互,但并未对axios库做过多的封装,导致代码重复度较高,维护起来比较麻烦,乘此机会对axios进行一次较为完整的封装,这里我考虑用面向对象的思想来进行实践。
// 安装axiosnpm install axios --save// 安装 elementPlusnpm install element-plus --save 2. 全局 axios 封装 src 目录下 utils 目录下,新建 request.ts,因为使用的是TS,需要提前定义数据格式: 定义请求数据返回的格式,需要提前确认好 定义axios 基础配置信息 ...