十七、TypeScript封装Fetch
1. 安装与配置TypeScript
首先，你的电脑上安装TypeScript。在命令行中输入以下命令:
npm install -g typescript
在你的项目根目录中，生成一个 tsconfig.json 文件来配置TypeScript的编译选项。在命令行中输入以下命令:
tsc --init
编辑 tsconfig.json 文件。这个文件配置了TypeScript的编译选项。确保以下设置已经开启:
{ "compilerOptions": { "target": "ES2015", "module": "commonjs", "strict": true }}
2. 创建Fetch服务
在src文件夹中创建一个新的 FetchService.ts 文件。我们将在这个文件中封装fetch API: 当然，下面我们会将put和delete方法也添加到我们的FetchService中：
export class FetchService { async get(url: string): Promise { const response = await fetch(url); if (!response.ok) { throw new Error(response.statusText); } const data: T = await response.json(); return data; } async post(url: string, body: any): Promise { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); if (!response.ok) { throw new Error(response.statusText); } const data: T = await response.json(); return data; } async put(url: string, body: any): Promise { const response = await fetch(url, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); if (!response.ok) { throw new Error(response.statusText); } const data: T = await response.json(); return data; } async delete(url: string): Promise { const response = await fetch(url, { method: 'DELETE' }); if (!response.ok) { throw new Error(response.statusText); } const data: T = await response.json(); return data; }}
这样我们就成功地创建了一个FetchService类，它封装了 fetch API的 GET, POST, PUT 和 DELETE 方法。每个方法都返回一个Promise，该Promise解析为一个泛型 T，这意味着你可以指定返回数据的类型。
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch（2）https://developer.aliyun.com/article/1348428?groupCode=tech_library
