带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch（1）https://developer.aliyun.com/article/1348429?groupCode=tech_library
3. 使用FetchService类
import { FetchService } from './FetchService'; const fetchService = new FetchService(); // GET requestconst fetchData = async () => { try { const data = await fetchService.get<{ message: string }>('https://api.example.com/data'); console.log(data.message); } catch (error) { console.error('An error occurred:', error); }} // POST requestconst sendData = async () => { try { const data = await fetchService.post<{ message: string }>('https://api.example.com/data', { key: 'value' }); console.log(data.message); } catch (error) { console.error('An error occurred:', error); }} // PUT requestconst updateData = async () => { try { const data = await fetchService.put<{ message: string }>('https://api.example.com/data', { key: 'new-value' }); console.log(data.message); } catch (error) { console.error('An error occurred:', error); }} // DELETE requestconst deleteData = async () => { try { const data = await fetchService.delete<{ message: string }>('https://api.example.com/data'); console.log(data.message); } catch (error) { console.error('An error occurred:', error); }} fetchData();sendData();updateData();deleteData();
以上代码首先导入了我们创建的 FetchService 类，并实例化了一个新的 fetchService 对象。然后，我们定义了四个异步函数，每个函数都执行一个网络请求，并在请求成功时打印出返回数据中的 message 字段。这四个函数分别对应 GET, POST, PUT 和 DELETE 请求。
我们使用了 <{ message: string }> 来指定返回数据的类型，这样我们就可以得到TypeScript的类型检查和自动补全功能。如果你的数据类型更复杂，你可以定义一个接口来描述它，然后在这里使用那个接口。
如果请求失败，我们在 catch 块中捕获错误并打印错误消息。如果服务器返回的HTTP状态码不是200-299，fetch API会认为请求成功，不会抛出错误。因此，我们在 FetchService 类的每个方法中都检查了 response.ok 属性，如果请求未成功，我们抛出一个包含状态文本的错误。
带你读《现代TypeScript高级教程》十七、TypeScript封装Fetch（3）https://developer.aliyun.com/article/1348426?groupCode=tech_library
