使用TypeScript和Fetch进行接口请求

在TypeScript中使用Fetch API进行接口请求非常方便。Fetch API是一个现代的、功能强大的网络请求库，可以替代许多传统的网络请求库，如XMLHttpRequest。Fetch API提供了更好的错误处理和更简单的Promise语法，使得异步编程更加方便。
首先，确保你的TypeScript项目已经安装了Fetch API。Fetch API是浏览器内置的，因此你不需要额外安装任何库。然而，如果你在Node.js环境中使用Fetch API，你需要安装一个适合的库，如node-fetch或isomorphic-fetch。
下面是一个使用Fetch API的基本示例：

async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}
fetchData();

在这个例子中，我们定义了一个异步函数fetchData，它使用fetch函数发送一个GET请求到指定的URL。我们使用await关键字等待fetch函数完成并返回一个Response对象。然后，我们检查Response对象的ok属性是否为真，如果不是，则抛出一个错误。最后，我们使用response.json()方法将响应体解析为JSON对象，并将其打印到控制台。
我们使用try/catch块来捕获和处理可能出现的任何错误。如果发生错误，我们将错误打印到控制台。
请注意，你需要将URL替换为你想要请求的实际URL。
除了基本的GET请求外，Fetch API还支持POST、PUT、DELETE等其他类型的请求。对于不同类型的请求，你可能需要设置请求头或发送请求体。下面是一个POST请求的示例：

async function postData(data: any) {
try {
const response = await fetch('https://api.example.com/data', { // 请求的URL和选项对象
method: 'POST', // 请求方法
headers: { // 设置请求头
'Content-Type': 'application/json',
},
body: JSON.stringify(data), // 发送请求体
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const serverResponse = await response.json(); // 等待服务器响应并解析为JSON
console.log(serverResponse);
} catch (error) {
console.error('Error:', error);
}
}
postData({ name: 'John', age: 30 }); // 调用函数并传递数据对象