在 UI 中处理 API 的数据和错误的流程答案

【问题标题】：Flow to handle data and errors of an API in the UI在 UI 中处理 API 的数据和错误的流程
【发布时间】：2023-03-04 04:06:01
【问题描述】：

我觉得应该在从 rest api 提取的 UI 中处理信息和错误的方式受阻。例如，对端点的响应可以获得[200, 201, 400, 401, 403, 404, 429, 500] 等之一。有些人可能有答案，但有些人不能，因为我可以正确显示在 UI 中获得的信息。

此端点负责验证电话号码以验证其格式是否有效。

POST - /lookup-phone-number - input(phoneNumber) -output(200|400|429|500)

200 - {"message": "+57 301XXXXXX"}

400 - {"message": "Please verify the phone number"}

429 - not body

500 - not body

我知道这可能是一个需要广泛回答的问题，但我只需要一个提示，一个大型项目的正确形式，以防我必须将 fetch 包装在一个方法中并将所有逻辑包含在一个函数中，或者我必须使用单独的 fetch 调用每个独立的端点。

如果 API 突然返回一个尚未处理的状态码以在 UI 中显示给最终用户怎么办，以防必须处理所有可能的状态以便最终用户知道发生了什么，或者它是最好给其他人一个普遍的错误。

【问题讨论】：

标签： javascript api rest flutter

【解决方案1】：

您可以使用JSend 格式。对于调用 POST /number/validate，您的 API 可能会返回：

如果成功 (2xx)：

{
  status: "success",
  data: { phone: "+57 301XXXXXX" }
}

如果发生失败 (4xx) （即用户做了坏事）：

{
  status: "fail",
  data: { error: "Invalid phone number." },
}

如果出现错误 (5xx) （即服务器崩溃）：

{
  status: "error",
  message: "Could not connect with the database."
}

有了这个，您不必依赖前端应用程序中的 HTTP 错误代码。请注意，这不是限制性规范。没有人强迫你完全按照他们的建议去做。

【讨论】：