React Native 中如何使用 Fetch API？

推荐答案

在 React Native 中使用 Fetch API 进行网络请求的基本步骤如下：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

本题详细解读

Fetch API 的基本用法

Fetch API 是一个现代的网络请求接口，用于替代传统的 XMLHttpRequest。它提供了一个简单、强大的方式来发起 HTTP 请求并处理响应。

1. 发起 GET 请求

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

• fetch(url)：发起一个 GET 请求到指定的 URL。
• .then(response => response.json())：将响应解析为 JSON 格式。
• .then(data => { ... })：处理解析后的数据。
• .catch(error => { ... })：捕获并处理请求过程中发生的错误。

2. 发起 POST 请求

// www.javascriptcn.com code example
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2',
  }),
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

• method: 'POST'：指定请求方法为 POST。
• headers: { 'Content-Type': 'application/json' }：设置请求头，指定请求体的内容类型为 JSON。
• body: JSON.stringify({ ... })：将请求体数据转换为 JSON 字符串。

3. 处理其他 HTTP 方法

Fetch API 支持所有常见的 HTTP 方法，如 PUT、DELETE 等。只需在 method 参数中指定相应的方法即可。

// www.javascriptcn.com code example
fetch('https://api.example.com/data/1', {
  method: 'DELETE',
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

4. 处理响应状态码

在 Fetch API 中，可以通过 response.status 来获取 HTTP 响应的状态码，并根据状态码进行不同的处理。

// www.javascriptcn.com code example
fetch('https://api.example.com/data')
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

5. 处理网络错误

Fetch API 不会自动处理网络错误（如网络不可用），因此需要在 .catch 中手动处理这些错误。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Network Error:', error);
  });

注意事项

• 跨域请求：在 React Native 中，默认情况下允许跨域请求，但在某些情况下可能需要配置服务器以允许跨域请求。
• 异步处理：Fetch API 是基于 Promise 的，因此需要使用 .then() 和 .catch() 来处理异步操作。
• 错误处理：Fetch API 不会自动处理网络错误，因此需要手动捕获并处理这些错误。

通过以上步骤，你可以在 React Native 中轻松使用 Fetch API 进行网络请求。