javascript - 获取 API : Can 'await res.json()' fail after a completed request?

Question

仅当存在网络或服务器错误时，获取 API 请求才会失败。因此，例如，如果我执行以下代码，假设它通过 try block 没有错误，我将有一个有效的填充 res .

try {
    const res = await fetch('/createurl', { 
        method: 'POST',
        body: 'testData',
        headers: {
            'Content-Type': 'application/json'
        }
    })

    if (res.ok) {
        alert('Resource created!')
    } else {
        alert('Error creating resource!')
    }

    flashResponseToUser(res)
} catch(e) {
    alert('A server or network error occurred during the request!')
}

我正在处理 res向用户展示必要的 error或 success使用 flashResponseToUser(res) 发送消息功能。由于 res.json()返回 Promise , flashResponseToUser必须是异步函数。

const flashResponseToUser = async(res) => {
    const jsonRes = await res.json() // Get data from response
    console.log(jsonRes)
}

我想知道:

为什么res.json()返回 Promise因为此时客户端已经收到响应？

Promise 在什么条件下由 res.json() 返回失败？

flashResponseToUser(res) 内的代码是否还需要包裹在 try-catch 中阻止，因为我正在使用 res.json() ?

Answer 1

Why does res.json() return a Promise since at this point the response has already been received by the client?

fetch返回一个响应对象。这表明响应的 header 已被接收，但并不一定意味着整个响应已被接收 - 例如，当您加载一个巨大的页面时。这并不完全相同，但您将收到 header ，并且浏览器将开始加载响应，即使还有更多内容要下载。 Response 对象提供了 header 和一种处理仍然传入数据的方法。

Under what conditions would the Promise returned by res.json() fail?

如果响应不是正确的 JSON 格式，它可能会失败。例如，如果响应的纯文本是 Internal Server Error ，这不是 JSON。这是一个例子:

(async () => {
  const response = await fetch('data:,Internal%20Server%20Error');
  console.log('got response');
  try {
    await response.json();
  } catch(e) {
    console.log('error:', e.message);
  }
})();

Does the code within flashResponseToUser(res) also need to be wrapped within a try-catch block since I am using res.json()?

如果你想绝对安全，是的。但是，在大多数情况下，最简单的方法是在一个可以处理错误的地方捕获。您可以在消费者中只处理一次错误，而不是在流程的每个步骤中处理可能的错误，例如:

const getInfo = async () => {
  const res = await fetch('/createurl', { 
    method: 'POST',
    body: 'testData',
    headers: {
      'Content-Type': 'application/json'
    }
  })

  if (!res.ok) {
    throw new Error(res.status);
  }
  return res.json();
};
getInfo()
  .then(flashResponseToUser)
  .catch(() => {
    alert('A server or network error occurred during the request!')
  })

(假设 flashResponseToUser 永远不会抛出，如果提供了预期的对象。如果 flashResponseToUser 无论如何都可能抛出，您可以分离出 .catch es 以区分网络错误和其他运行时错误)