android - 如何在 React Native 中显示服务器对 HTTP 错误的响应

Question

我正在开发 React Native 应用程序。我们最近对 API 调用进行了更改，它可以用 500 和详细说明问题的错误消息进行响应，以便将其呈现给用户。 API 响应如下所示:

{
    "error": ["Renter contact info for User 1 missing"]
}

在客户端，我们使用标准的 fetch() 方法异步发出请求，并解析 Promise 以提取响应对象。当我在应触发 500 的调用后记录响应时，对象如下所示:

{type: "default", status: 500, ok: false, statusText: undefined, headers: Headers…}

这是我们用于所有 API 调用的内部 request() 方法:

export function request(endpoint:string, parameters:Object, method:string = HTTP.get, timeout:number = 3000):Promise{

  return new Promise(async (resolve, reject) => {
    const payload = {
      method,
      headers: {
        'Accept': CONTENT_TYPE,
        'Content-Type': CONTENT_TYPE,
        'Authorization': `Basic ${base64.encode(Config.API_TOKEN)}`,
        'Auth-Token': await Agents.authToken,
      },
      body: JSON.stringify(parameters),
    }

    fetch(apiUrl(endpoint), payload)
      .then(response => {
        if(!response.ok) {
          // ******************
          // this is where the 500 error state is caught, but my response object doesn't contain the message sent from the server.
          reject(response)
          // ******************
        }

        return response
      })
      .then(resolve)
      .catch(reject)
  })
}

如何确保响应对象包含来自服务器的错误消息，以便我可以将其正确显示给我的用户？

Answer 1

fetch(apiUrl(endpoint), payload)
      .then(response => {
        if(!response.ok) {
          response.json().then(function(data) {
            console.log(data);// your error response
          },function(error) {
            //json error
          });
          reject(response)
          // ******************
        }

        return response
      })

response 是一个 ReadableStream 对象。你需要使用.json() 来解析