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（）来解析

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

1 个答案: