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

你当前的问题核心是sendRequest没有返回支持异步等待的Promise对象，函数调用后会直接执行后续代码，此时XHR请求还没完成，set(storageKey...)的逻辑还没触发，自然读取不到对应存储值。你写的await get()仅会等待读本地存储的操作完成，不会等待网络请求结束，所以无法解决时序问题。

第一步：改造sendRequest为返回Promise的异步函数 #

import { set } from './storage';

// 处理所有API请求
export function sendRequest(type: 'GET' | 'POST', route: string, storageKey: string, body?: any): Promise<any> {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    const payload = body ? JSON.stringify(body) : null;
    const url = `http://localhost:8001${route}`;
    request.open(type, url);
    // POST请求需加Content-Type头，否则后端大概率无法正常解析参数
    if (type === 'POST') {
      request.setRequestHeader('Content-Type', 'application/json');
    }
    request.send(payload);

    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 300) {
          // 将响应字符串转为JSON对象，避免后续直接读取字符串无法取.success字段的问题
          const responseData = JSON.parse(request.response);
          if (storageKey) {
            // 存储到本地的同时将结果返回给调用方
            set(storageKey, responseData).then(() => resolve(responseData));
          } else {
            resolve(responseData);
          }
        } else {
          // 处理接口报错逻辑
          reject(new Error(`请求失败，状态码：${request.status}`));
        }
      }
    };
    // 处理网络异常等底层错误
    request.onerror = () => reject(new Error('网络异常，请检查后重试'));
  });
}

第二步：调整调用逻辑，先等待请求完成再执行后续操作 #

const body = {
  username: username,
  password: password
};
try {
  // 等待请求完成后可直接拿到返回结果，无需额外再读一次本地存储
  const response = await sendRequest('POST', '/login', "userValid", body);
  if (response.success) {
    window.location.href = "/main_tabs";
  } else {
    alert("Incorrect password");
  }
} catch (err) {
  // 统一捕获请求错误做提示
  alert(err.message);
}

• 后续其他业务场景需要读取用户登录信息时，直接调用get('userValid')即可，无需重复发起登录请求
• 不需要存入本地存储的请求，传空字符串作为storageKey参数即可

内容的提问来源于stack exchange，提问作者ep742