在 Ionic React 中存储 HTTP 响应的最佳方式是什么？

Question

我正在使用 Ionic React 开发一个应用程序，它执行一些对 API 的 HTTP 请求。问题是我需要将请求的响应存储在本地存储中，以便在任何地方都可以访问它。我目前的做法是使用@ionic/storage:

let body = {
  username: username,
  password: password
};
sendRequest('POST', '/login', "userValid", body);
let response = await get("userValid");
if (response.success) {
  window.location.href = "/main_tabs";
} else if (!response.success) {
  alert("Incorrect password");
}

import { set } from './storage';

// Handles all API requests
export function sendRequest(type: 'GET' | 'POST', route: string, storageKey: string, body?: any) {
  let request = new XMLHttpRequest();
  let payload = JSON.stringify(body);
  let url = `http://localhost:8001${route}`;
  request.open(type, url);
  request.send(payload);

  request.onreadystatechange = () => {
    if (request.readyState === 4 && storageKey) {
      set(storageKey, request.response);
    }
  }
}

问题是当我得到userValid 键时，响应还没有回来，所以即使等待也会返回未定义。因此，我每次都必须发送另一个相同的请求，以便 Ionic 读取正确的值，这实际上是第一个请求的响应。除了每次执行请求时设置超时之外，还有其他正确的方法吗？

Answer 1

您正在检查设置之前的存储结果。这是因为您的 sendRequest 方法正在调用异步 XMLHttpRequest 请求，并且您在 sendRequest 方法完成之前检查存储。这可以通过使 sendRequest 异步并稍微重组代码来解决。

我建议您改为寻找使用钩子或 API 库的离子反应示例 - 例如 fetch 或 Axios。这将使您的生活更轻松，并且您应该找到大量示例和文档。查看下面的一些参考资料以开始使用：

Example from the Ionic Blog using Hooks

Example using Fetch using React

Related Stack Overflow leveraging Axios