为什么在 React 中的 fetch 调用中有 2 个 then 块？

Question

我正在使用 fetch api 从后端获取数据，它按我预期的方式工作。但是我无法弄清楚为什么在 fetch 调用中需要 2 then 块。

Answer 1

Fetch API 使用 promises 并将请求作为参数并返回解析为 Response 对象的 promise，该响应对象具有有关服务器响应的信息，例如 status code 和 headers 以及response 是你想要的数据，并且 Response 对象上的一些方法也返回 Promise 所以你需要制作另一个 then 块，像 response.json() response.text 这样的方法() response.blob()，所以这就是为什么您需要两个 then 块，第一个从服务器解析 response，第二个从响应中获取数据。 了解更多

获取 API

javascript 承诺

使用 Fetch API

Answer 2

Fetch 返回 Promise（Promise 的简单文章），你需要 resolve promise 才能访问数据。要解决承诺，您需要使用 then()

一个基本的获取示例：

fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(data => console.log(data, 'Data'));

上面的例子中，fetch返回的是promise，所以在resolved中 首先 then() 它正在获取响应对象 整个 HTTP 响应的表示。所以要提取JSON 来自 Response 对象的正文内容，我们需要使用 json() 方法，它返回第二个 promise，该 promise 用结果解析 将响应正文文本解析为 JSON。 点击这里了解更多 详细

在这里，我使用在线 js 编译器运行提取并在控制台中显示输出。请看图片中的描述。

Answer 3

在没有看到您的代码的情况下，我假设在第一个“then”块中返回和协调的承诺有另一个异步调用和它自己的返回。比如……

foo() //returns a promise
.then(() => { // called when "foo" resolves the promise
    return bar();
})
.then(() => { // called when "bar" resolves the promise
})
.catch((err) => { //errors
});

如果第一个“then”块没有返回另一个承诺，我认为第二个块不会被调用。