在 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 键时，响应还没有返回，所以即使等待也会 return 未定义。因此，我每次都必须发送另一个相同的请求，以便 Ionic 读取正确的值，这实际上是第一个请求的响应。除了每次执行请求时设置超时之外，还有正确的方法吗？

Answer 1

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

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

Example from the Ionic Blog using Hooks

Example using Fetch using React

Related Stack Overflow leveraging Axios