--- theme: channing-cyan highlight: a11y-dark --- `JS` 提供了 `fetch` 方法来请求数据，我们在这里对它进行简单的 `TS` 封装 ## 封装fetch ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f6ee4936f8f4d9987ed117e7d0c5837~tplv-k3u1fbpfcp-watermark.image?) - `fetch` ```ts const BASE_URL = process.env.NODE_ENV == 'production' ? '' : 'http://localhost:3000/api' type configType = { url: string method: 'GET' | 'POST' | 'PUT' | 'DELETE' data: any } class SxRequest { baseURL: string constructor(config: { baseURL: string }) { this.baseURL = config.baseURL } async request(config: configType) { // fetch中GET方法没有请求体需要拼接到url中参数直接拼接 const fetchURL = this.baseURL + config.url // 如果是POST 把data传递给body const fetchConfig: RequestInit = config.method === 'POST' ? { method: config.method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(config.data) } : { method: config.method } // 获取fetch的数据并返回 const res = await fetch(fetchURL, fetchConfig) const data: T = await res.json() return data } get(url: string, data?: T2) { return this.request({ url, method: 'GET', data }) } post(url: string, data?: T2) { return this.request({ url: url, method: 'POST', data }) } } export default new SxRequest({ baseURL: BASE_URL }) ``` `todo` ```ts import { ITodo, ResType } from '@/type' import sxRequest from '../index' // 查询todo列表 export const getTodoList = () => { return sxRequest.get>('/api/todo/list') } // 创建todo export const createTodo = (content: string) => { return sxRequest.post, { content: string }>( '/api/todo/create', { content } ) } // 更新todo export const updateTodo = (todo: ITodo) => { return sxRequest.post, ITodo>('/api/todo/update', todo) } // 删除todo export const deleteTodo = (id: string) => { return sxRequest.post, { id: string }>('/api/todo/delete', { id }) } ``` - 使用 ```ts // 网络请求 const res = await getTodoList() ```