0

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?

ep742
  • 20
  • 2
  • Your issue is that sendRequest is triggering an asynchronous XMLHttpRequest request. You are checking storage before the sendRequest method is complete. You need to modify this code to make sendRequest async and leverage await on that call. There are alternative ways to leverage this type of feature in ionic though. If I get the chance, i'll throw a sample in the answer for you. – lee whitbeck Sep 17 '21 at 19:36

1 Answers1

0

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

lee whitbeck
  • 460
  • 4
  • 12
  • Thanks, is there a way to do it while still keeping the request code in a separate file? – ep742 Sep 18 '21 at 13:01
  • @ep742 Yes, you can include the request(s) in a separate file. I edited answer to include a link directly from Ion's Blog. If you look for the API examples, you will get an idea on how this would be structured. Below is the sample repo included in the article that serves as an example too: https://github.com/mlynch/ionic-react-hooks-demo – lee whitbeck Sep 20 '21 at 12:06