What's the best way to store a HTTP response in Ionic React?-CodePudding

I'm developing an app with Ionic React, which performs some HTTP requests to an API. The problem is I need to store the response of the request in a local storage so that it is accessible everywhere. The way I'm currently doing it uses @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);
    }
  }
}

The problem is that when I get the userValid key the response hasn't come back yet, so even awaiting will return undefined. Because of this I have to send another identical request each time in order for Ionic to read the correct value, which is actually the response from the first request. Is there a correct way of doing this other than just setting timeouts everytime I perform a request?

CodePudding user response：

You are checking for the results of storage before it was set. This is because your sendRequest method is calling an asynchronous XMLHttpRequest request, and you are checking storage before the sendRequest method is complete. This can be fixed by making sendRequest async and restructuring your code a bit.

I would suggest you instead look for examples of ionic react using hooks or an API library - like fetch or Axios. This will make your life much easier, and you should find lots of examples and documentation. Check out some references below to get started:

Example from the Ionic Blog using Hooks

Example using Fetch using React

Related Stack Overflow leveraging Axios