javascript - 我能以某种方式在第一个 `then` 中获得 fetch 响应吗？

Question

我正在尝试使用 Fetch API。从示例看来，GET 请求需要一个 then以某种方式解析响应。

目前我正在这样做

fetch(url)
    .then(response => response.json())
    .then(response => {
        console.log(response);  
    });

然而，第一个 then看起来像样板。我试图避免它，例如:

fetch(url)
    .then(response => {
        console.log(response.json());  
    });

但这给我记录了一个未决的 Promise状态为 resolved .

我阅读了有关该主题的其他问题并阅读了一些有关 promise 的内容，但我不明白是否可以将其组合成一个 then (如果是这样 - 如何？)与否。

例如，两个答案 here指出

There is no need to use more than one '.then'

和

there is no good reason to have two .then() handlers as the code from each could have been combined into a single .then() handler

但我无法让这个例子真正起作用——我仍然得到了一个 promise :)

相反，接受的答案 here解释说 .then实际上对结果做了一些事情(从 promise 中提取返回)，但如果我自己能以某种方式做到这一点，我无法理解，比如 response.json().then()或 response.json().getVal()或者是双 - then语法的唯一方法。

Answer 1

这很简单:当你发送一个 fetch()请求，它返回一个包含响应的 promise 。第一个 .then() 解决了这个问题.解决第一个 promise 实际上返回 Response .
现在这是棘手的部分:读取响应正文的方法，无论是 .json() , .text() , .blob() .... 所有退货 promise .这意味着您需要解决第二个 promise 才能获得解析的响应。
流程如下所示:

制作 fetch()请求，它返回一个 Response 类型的 Promise

当您尝试解析 Response 的内容时，它将返回第二个 Promise，其类型取决于您使用的方法(例如 .json() 返回一个对象，.text() 返回字符串，.blob() 返回 Blob)。

解决第二个 Promise，您将得到实际解析的响应正文

p/s: 如果你不使用 fetch()在顶级上下文中(在编写顶级等待时仍然不是一件事)，那么您可以使用 async/await 使您的代码更具可读性:

const response = await fetch(url);
const content = await response.json();
console.log(content);