How to use fetch in TypeScript

在TypeScript中使用fetch API进行网络请求是一个常见的实践，它允许你以异步方式从网络获取资源。以下是一个在TypeScript中使用fetch的步骤和示例：

1. 基础用法

首先，你可以直接使用fetch函数来发送一个GET请求，并获取数据。比如，我们向一个API请求JSON数据：

typescript
fetch('https://api.example.com/data')
  .then(response => {
    // 确保服务器响应的状态码是200
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with your fetch operation:', error));

2. 异步函数中使用

为了使代码更加清晰和易于管理，你可以在一个异步函数中使用fetch，这样可以使用async和await关键字：

typescript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was a problem with your fetch operation:', error);
  }
}

fetchData();

3. 添加类型

在TypeScript中，你可以定义接口来描述你期望的数据结构，这有助于提高代码的可读性和健壮性：

typescript
interface Data {
  id: number;
  name: string;
}

async function fetchDataTyped(): Promise<Data> {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data: Data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('There was a problem with your fetch operation:', error);
    throw error;
  }
}

fetchDataTyped();

4. 处理POST请求

使用fetch发送POST请求，你需要指定请求方法和请求体：

typescript
async function postData(url: string, data: Data): Promise<Data> {
  try {
    const response = await fetch(url, {
      method: 'POST', // 设置请求方法
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data), // 将JavaScript对象转换为字符串
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const responseData: Data = await response.json();
    console.log(responseData);
    return responseData;
  } catch (error) {
    console.error('There was an error posting the data:', error);
    throw error;
  }
}

const myData = { id: 123, name: 'Example' };
postData('https://api.example.com/data', myData);

使用fetch时，确保你处理各种可能的错误情况，包括网络错误、服务器错误等。此外，合理使用TypeScript的类型系统可以帮助确保数据处理的准确性和代码的健壮性。