Question

我使用后端API，该API返回针对同一端点的不同请求的不同数据类型。虽然更合适的解决方案是统一返回的数据类型，但是传统，时间和缺乏测试都不利于该解决方案。

我正在集中我的call方法，以供应用程序中需要调用端点的其他部分使用。此call方法实现了访存。有关信息：

export default function call<P> (method: TCallMethod, payload: P, parameter?: string): Promise<IServerResponseObject> {
  const url: string = buildUrl(parameter);
  const body: string | null = payload ? JSON.stringify(payload) : null;

  return fetch(url, {
    method,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${getAuthToken()}`
    },
    body
  }).then(async (response) => {
    let body: IServerResponseObjectBody = {
      message: '',
      code: ''
    };

    if (response) {
      body = await response.json();
    }

    return {
      status: response.status,
      body
    };
  });
}

接收数据时，我正在使用Response.json方法对其进行解码。

if (response) {
  body = await response.json();
}

问题是有时我没有收到任何数据（当用户未通过身份验证时-尽管这是一个极端的情况），或者服务器仅返回一个布尔值。

在这种情况下，json()执行失败，因为我们没有处理JSON数据。

即：

FetchError: invalid json response body at http://localhost:4545/api/definition/isNameUnique/used%20name reason: Unexpected end of JSON input

我想知道是否有比嵌套try/catches更干净的方法来从可用的https://developer.mozilla.org/en-US/docs/Web/API/Body#Methods

中确定要使用哪种解码方法

这似乎是一个潜在的解决方案：https://developer.mozilla.org/en-US/docs/Web/API/Body#Properties，但是文档不是太明确，并且缺少有关如何使用它的示例。

Answer 1

在我看来，您想使用text来读取响应，然后查看结果文本并决定要做什么。大致：

const text = await response.text();
if (!text) {
    // no response, act accordingly
} else if (reBool.test(text)) {
    // boolean response, determine whether it's true or false and act on it
} else {
    // JSON response, parse it
    data = JSON.parse(text);
    // ...then use it
}

......，其中reBool是一个正则表达式，用于测试服务器有时返回的布尔值，例如/^(?:true|false)$/i。

如果响应中可能包含空格，则可以trim response.text()的结果。

您可能还想做一些不相关的事情：

您并不是要检查是否成功（这是很多人犯的错误，所以很多人都在我本来贫乏的小博客上写下了这个错误）。在使用response.ok或json等之前，请先检查text。
将async函数作为回调传递给then并没有多大意义。如果您要使用async，请通过将call设为async函数来更早地进行操作，然后在整个身体中使用await而不是隐喻。

解决这些问题并折叠在上面的主要答案中（您需要进行必要的调整，IServerResponseObject需要更改，或者您需要对布尔响应做一些不同的事情）

const reBool = /^(?:true|false)$/i;

export default async function call<P> (method: TCallMethod, payload: P, parameter?: string): Promise<IServerResponseObject> {
  const url: string = buildUrl(parameter);
  const body: string | null = payload ? JSON.stringify(payload) : null;

  const response = await fetch(url, {
    method,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: `Bearer ${getAuthToken()}`
    },
    body
  });
  const {status} = response;
  if (!response.ok) {
    throw new Error("HTTP error " + status); // Or `return {status};` or similar, but making it an error is useful
  }
  const text = (await response.text()).trim();
  let result = {status};
  if (!text) {
    // blank, act accordingly, perhaps:
    result.body = null;
  } else if (reBool.test(text)) {
    result.body = text === "true";
  } else {
    result.body = JSON.parse(text);
  }
  return result;
}

动态决定使用哪种提取响应方法

1 个答案: