--- theme: v-green --- ## 实战：axios - 支持请求和响应拦截器 - 支持取消请求和取消全部请求的功能 - 提供了 GET、POST、PUT、DELETE 四种请求方法 ```ts import axios from "axios" import type { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig, AxiosRequestConfig } from "axios" class Request { // Axios 实例 instance: AxiosInstance // 存放取消请求控制器 abortControllerMap: Map constructor(config: AxiosRequestConfig) { // 创建 Axios 实例 this.instance = axios.create(config) // 存储取消请求的控制器 this.abortControllerMap = new Map() // 添加请求拦截器 this.instance.interceptors.request.use( (res: InternalAxiosRequestConfig) => { // 创建取消请求的控制器 const controller = new AbortController() // 获取请求的 url const url = res.url || "" // 将控制器存储到 Map 中 res.signal = controller.signal this.abortControllerMap.set(url, controller) return res }, (err: any) => err ) // 添加响应拦截器 this.instance.interceptors.response.use( (res: AxiosResponse) => { // 获取响应的 url const url = res.config.url || "" // 从 Map 中删除对应的控制器 this.abortControllerMap.delete(url) return res.data }, (err: any) => err // 响应拦截器错误处理函数 ) } // 发送请求的方法，返回 Promise 对象 request(config: AxiosRequestConfig): Promise { return new Promise((resolve, reject) => { this.instance .request(config) .then(res => { resolve(res as T) }) .catch((err: any) => { reject(err) }) }) } // 取消全部请求 cancelAllRequest() { for (const controller of this.abortControllerMap.values()) { controller.abort() } // 清空 Map this.abortControllerMap.clear() } // 取消指定的请求 cancelRequest(url: string | string[]) { // 将参数转换为数组 const urlList = Array.isArray(url) ? url : [url] urlList.forEach(_url => { // 根据 url 获取对应的控制器并取消请求 this.abortControllerMap.get(_url)?.abort() // 从 Map 中删除对应的控制器 this.abortControllerMap.delete(_url) }) } // 发送 GET 请求的方法，返回 Promise 对象 async get(url: string, config?: AxiosRequestConfig): Promise { return this.request({ ...config, method: "get", url }) } // 发送 POST 请求的方法，返回 Promise 对象 async post(url: string, data?: any, config?: AxiosRequestConfig): Promise { return this.request({ ...config, method: "post", url, data }) } // 发送 PUT 请求的方法，返回 Promise 对象 async put(url: string, data?: any, config?: AxiosRequestConfig): Promise { return this.request({ ...config, method: "put", url, data }) } // 发送 DELETE 请求的方法，返回 Promise 对象 async delete(url: string, config?: AxiosRequestConfig): Promise { return this.request({ ...config, method: "delete", url }) } } const myRequest = new Request({ baseURL: "https://www.fastmock.site/mock/13089f924ad68903046c5a61371475c4", timeout: 10000, }) export default myRequest ``` 使用： ```html ``` ## 实战：localStorage ```ts interface LocalStorageItem { value: T // 存储的值 expire: number | null // 过期时间，如果为 null 则表示永不过期 } class LocalStorage { private static instance: LocalStorage // 单例模式，保证只有一个实例 private storage: Storage // localStorage 对象 private constructor() { this.storage = window.localStorage // 获取 localStorage 对象 } public static getInstance(): LocalStorage { if (!LocalStorage.instance) { // 如果实例不存在，则创建一个新实例 LocalStorage.instance = new LocalStorage() } return LocalStorage.instance // 返回实例 } public setItem(key: string, value: T, expire?: number): void { const item: LocalStorageItem = { value: value, // 存储的值 expire: expire ? new Date().getTime() + expire : null, // 过期时间 } this.storage.setItem(key, JSON.stringify(item)) // 将对象序列化为字符串并存储到 localStorage 中 } public getItem(key: string): T | null { const itemStr = this.storage.getItem(key) // 获取存储的字符串 if (itemStr) { // 如果字符串存在 const item: LocalStorageItem = JSON.parse(itemStr) // 将字符串反序列化为对象 if (!item.expire || new Date().getTime() < item.expire) { // 如果没有过期或者还没有过期 return item.value // 返回存储的值 } else { this.storage.removeItem(key) // 如果已经过期，则删除该项 } } return null // 如果不存在或者已经过期，则返回 null } public removeItem(key: string): void { this.storage.removeItem(key) // 删除指定的项 } public clear(): void { this.storage.clear() // 清空 localStorage } } export default LocalStorage.getInstance() // 导出 LocalStorage 实例 ``` 使用： ```html ```