// vite.config.ts import vue from'@vitejs/plugin-vue' import { viteMockServe } from'vite-plugin-mock' exportdefault defineConfig({ plugins: [ vue(), viteMockServe() ], }) 复制代码 建立mock 文件,一个登录接口返回 token,一个用户信息接口返回用户名等信息,还有一个模拟出现业务错误的接口。 /...
//service/request/request.ts//省略前后部分代码//...constructor(config:AxiosRequestConfig){this.instance=axios.create(config)//全局请求拦截this.instance.interceptors.request.use((config)=>{console.log(config)returnconfig},(error)=>{console.log('全局请求失败拦截',error)})//全局响应拦截this.instance...
1.为了保证关键数据的安全性 2.对外隐藏实现细节,隔离复杂度 3.什么时候应该封装 1.当一些数据不希望外界可以直接修改时 2.当一些函数不希望外界使用时 4.如何使用 class Person: def __init__(self,id_number,name,age): self.__id_number = id_number self.name = name self.age = age def show_id...
前端开发:基于TS的axios 二次封装。#前端 #前端学习 #前端入门 #前端面试 #前端培训 - 前端徐老师(线上课)于20240122发布在抖音,已经收获了581个喜欢,来抖音,记录美好生活!
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...
1.可以创建多个创建多个互不干扰,完全独立的axios实例 2.通过创建的实例调用各种方法(request,get,post...) 封装的前置认识 类的基本使用 TS AxiosInstance —— axios实例的类型 AxiosResponse —— 响应的数据类型 InternalAxiosRequestConfig —— 传入配置config的类型/请求的数据类型 为什么要对Axios进行封装 弊端:...
axios+ts 使用class类二次封装axios此次封装代码取自开源项目GeekerAdmin,感谢作者。一、interface类型提取几个接口类型可以直接从axios的ts库里直接提取,以下是请求和响应配置项接口// aixos请求配置项接口 export interface AxiosRequestConfig<D = any> { url?: string; method?: Method | string; baseURL?: ...
在项目中用ts封装axios,一次封装整个团队受益 写在前面 虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就一步一步的去封装,实现一个灵活、可复用的一个请求请发。
一、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 本身已经很好用了,看似多次一举的封装则是为了让 axios 与项目解耦。比如想要将网络请求换成 fetch,那么只需按之前暴露的 api 重新封装一下 fetch 即可,并不需要改动项目代码。 目标 统一请求API 使用接口数据时能有代码提示 文件结构 │ index.ts # 实例化封装类实例│├─http │ request.ts # 封装axi...