【JS】fetch请求中的promise

一、如何使用 fetch 返回的 Promise 对象处理网络请求

当你使用 fetch 发起网络请求时，它会返回一个表示该请求的 Promise 对象。这个 Promise 在请求完成后会解决为一个 Response 对象，无论请求成功或失败。你可以使用 .then() 方法来访问响应的内容和状态码，以及使用 .catch() 方法来处理请求的错误。

下面是一个简单的示例，展示了如何使用 fetch 返回的 Promise 对象处理网络请求：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析响应为 JSON
  })
  .then(data => {
    console.log(data); // 处理返回的数据
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

在这个示例中，fetch 返回的 Promise 对象被链式地使用 .then() 方法处理成功的响应，并使用 .catch() 方法处理任何可能的网络请求错误。这种方式使得在处理异步网络请求时，可以更加清晰和方便地管理代码逻辑。

二、 res.json() or res

在 JavaScript 中处理 HTTP 请求时，特别是在使用 Fetch API 或类似的方法时，你可能会遇到在 then 方法中放置 res.json() 或者直接放置 res 的情况。这两种方式的选择取决于返回的响应类型和你希望如何处理这些响应。

1. res.json()

• 当使用 Fetch API 或类似的方法进行网络请求时，res.json() 用于解析响应体为 JSON 格式。
• 如果服务器端返回的是 JSON 数据，你通常会在 then 中使用 res.json() 来处理这个 JSON 数据。
• res.json() 返回一个 Promise，这个 Promise 在成功时会解析为一个包含 JSON 数据的 JavaScript 对象。

fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => {
    // 处理返回的 JSON 数据
    console.log(data);
  });

2. 直接使用 res

• 如果你对返回的 Response 对象本身有特殊的处理需求，比如获取响应头信息、状态码等，你可以直接在 then 中使用 res。
• 这种情况下，你可以自己处理 Response 对象，而不是将其解析为 JSON 数据。

fetch('https://api.example.com/data')
  .then(res => {
    // 处理 Response 对象
    console.log(res.status);
    console.log(res.headers.get('Content-Type'));
    return res.text(); // 返回响应的文本内容
  })
  .then(text => {
    // 处理文本内容
    console.log(text);
  });

总结

• 使用 res.json() 当你期望服务器返回的是 JSON 数据，并且你想要将其解析为 JavaScript 对象时。
• 使用 res 当你需要对 Response 对象本身进行操作，或者希望直接处理返回的原始文本内容时。

根据你的需求和服务器返回的数据格式，选择适合的方式来处理响应数据。