JavaScript：有没有办法在响应不正确时检测响应是否包含 json 格式的错误消息

Question

我正在为fetch 编写一个简单的包装器。

async function apiCall(
  endpoint: string,
  {
    data,
    headers: customHeaders,
    ...customConfig
  }: { data?: Object; headers?: Object } = {}
) {
  const config = {
    method: data ? 'POST' : 'GET',
    body: data ? JSON.stringify(data) : undefined,
    headers: {
      'content-type': data ? 'application/json' : undefined,
      ...customHeaders,
    },
    ...customConfig,
  }

  return fetch(endpoint, config as any).then(async (response) => {
    if (response.ok) {
      const json = await response.json() // ????
      return json
    } else {
    // ???? ???? what if `response` contains error messages in json format?
      return Promise.reject(new Error('Unknown Error'))
    }
  })
}

它工作正常。问题在于这个 sn-p

 return fetch(endpoint, config as any).then(async (response) => {
    if (response.ok) {
      const json = await response.json()
      return json
    } else {
    // ???? ???? what if `response` contains error messages in json format?
      return Promise.reject(new Error('Unknown Error'))
    }
  })

如果响应不正确，它会使用通用Error 拒绝。这是因为默认情况下，window.fetch 只会在实际网络请求失败时拒绝承诺。但问题是，即使response 不正常，它仍然可能会出现json 格式的错误消息。这取决于后端实现细节，但有时您可以通过response.json() 在响应正文中获取错误消息。现在这个用例没有包含在我构建的包装器中。

所以我想知道我将如何解释这一点？我想你可以做类似的事情

fetch(endpoint, config as any).then(async (response) => {
      if (response.ok) {
        const json = await response.json()
        return json
      } else {
          try {
            const json = await response.json()
            return Promise.reject(json)
          } catch {
            return Promise.reject(new Error('Unknown Error'))
          }
      }
    })

但我想知道是否有更优雅的方法可以做到这一点？

最后，我非常了解 Axios 之类的库。我建造这个部分是为了满足我的求知欲。

顺便说一句，一个稍微不相关的问题，但我想知道这两个是否等价

 if (response.ok) {
        const json = await response.json()
        return json
      }

 if (response.ok) {
        return response.json()
      }

有人将我的问题标记为与this question 重复。事实上，它们并不相同。我没有做出与该问题相同的假设，即 API 调用在成功和失败时都返回 JSON 数据。我的问题是关于在我们不能做出这样的假设的情况下我们应该怎么做。

Answer 1

响应不是 ok 并不能阻止您将其主体作为 JSON 使用，因此您的最后一个 sn-p 确实应该如何处理。

现在你要求一些“更优雅”的东西，它可能不会更优雅，但写同样的东西的一种更少冗余的方式是：

fetch(endpoint, config as any).then(async (response) => {
  if (response.ok) {
    return response.json(); // there is no need to await the return value
  }
  else {
    const err_message = await response.json() // either we have a message
      .catch( () => new Error( "Unknown Error" ) ); // or we make one
    return Promise.reject( err_message );
  }
})

关于最后一个问题，是的，两者都是等价的，await 版本在微任务队列中再进行一次往返，并使您的代码更长一些，但对于所有这些问题，我们可以说它们是相同的.

Answer 2

我会进一步简化 Kaiido，修复一些错误，并添加自定义错误处理程序。

class ApiCallError extends Error {

  response: Response;
  body: any;
  httpStatus: number;

  constructor(response, body) {

    super('HTTP error: ' + response.status);
    this.httpStatus = response.status;
    this.response = response;
    this.body = body;

  }  

}

async function apiCall(endpoint: string, options?: any) {

  const config = {
    // do your magic here
  }

  const response = await fetch(endpoint, config);

  if (!response.ok) {
    throw new ApiCallError(response, await response.json());
  }
  return response.json();
}

变化：

1. 如果您只是要再次抛出错误，则无需捕获错误。
2. 如果您支持 await，则不需要 .then()，这将使您的代码更简单。
3. Promise.resolve 和Promise.reject 真的没有意义，你可以只使用return 或throw。
4. 你不应该返回简单的错误，你应该抛出它们（或确保它们被包裹在一个拒绝承诺中）
5. 尽管在 javascript 中您可以“抛出任何东西”，包括字符串和任意对象，但最好抛出 Error 或扩展的东西，因为这会给您一个堆栈跟踪。
6. 使自定义错误类中的所有错误信息都可用，从而为apiCall 的用户提供了可能需要的一切。