Is it better to use Asynchronous or Synchronous request with XMLHttpRequest in the Firefox Extension for handling multiple requests

As a newcomer to developing Firefox Add-Ons, my initial project involves calling an external API in two steps:

Step 1) Retrieve data from the API.
Step 2) Use the data retrieved in Step 1 to make another call to the same API for additional information.

Initially, I used XMLHttpRequest in synchronous mode because I believed that waiting for Step 2 required this approach. It involved two separate calls to the function handling the API requests, utilized XMLHttpRequest, and parsed the responses successfully.

However, after exploring documentation on the Mozilla Development Network advocating for asynchronous XMLHttpRequest usage, I decided to give it a try.

I based my new implementation on resources like multiple XMLHttpRequests and others, resulting in the code snippet provided below.

My query is: Is this the correct method to follow? Should I return to using synchronous mode? While the current setup functions properly, something about it feels off in terms of aligning with standard AJAX practices...

 // Include your code here
  

Answer №1

A best practice to keep in mind is to steer clear of synchronous network requests because they can cause the GUI to freeze until a response is received. Remember, just because the network is speedy for you doesn't mean it will be for all users.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The line break refuses to concatenate

I've been grappling with trying to format and print a 9x9 2D JavaScript array into a grid, but for some reason I can't seem to get the line breaks right. Instead of displaying the array in a neat square grid, it's all coming out in a single ...

List of random points generated using Three.js

Novice inquiry: I have generated some random points in JavaScript. How can I individually access each point later on? I remember something about an 'Object' that holds all the points, allowing me to manipulate their positions or selectively retri ...

Display the precise outcome for each division following a successful AJAX callback

I’m facing a challenge in getting individual results for each item after a successful AJAX callback. Currently, I am able to retrieve results, but when there are multiple items, all displayed results are being added to each div instead of just the corres ...

Specify that a function is adhering to an interface

Is there a way in Typescript to ensure that a function implements a specific interface? For example: import { BrowserEvents, eventHandler, Event } from './browser-events'; export function setup(){ const browserEvents = new BrowserEvents(); b ...

Utilize two separate functions within the onchange event of a v-checkbox component in a Vue.js application

I am currently using Vue.js with Vuetify and Laravel. In one of my components, I have a dynamic datatable that fetches data from the database using axios. Within this datatable, there are v-checkboxes. Everything is functioning as expected, but now I want ...

Select state and city options similar to the national breakdown page

I'm attempting to replicate a state and city selection box similar to the one on the NTTS Breakdown website. You can see it in action here: When you select a state on the left side of the webpage, the city selection box displays "loading data" and th ...

Tips for changing the background with a jquery slider

Using a jquery slider, I have a single layout with a center div for content. I am trying to change the color of the layout as I slide to a different page. This is for an ASP.NET MVC3 project. HTML: <div id="iPhone_Product"> <div class="s ...

Jasmine secretly observes the behavior of Angular services

I'm currently in the process of setting up unit tests for an angular controller using jasmine and karma. Due to the length of my code, I won't be able to include it all here. However, I'll provide some snippets: CompilerController.js (the c ...

The function of modal in JavaScript is not working properly

I am encountering a problem with my web page that is running on Wildfly 12. It is a simple Java EE project that I developed in Eclipse Neon. The issue arises when I try to use Bootstrap modals, as every time I attempt to open or use the methods in a JavaSc ...

I keep encountering a 404 error whenever I try to access a controller method using Ajax. What could be causing this

In my ValidationController, there is a method named EmailExist. I made an ajax call to the following URL: $.ajax({ type: "POST", url: "/Validation/EmailExist", data: { 'Email': $('#Email').val() }, success: fun ...

Error thrown due to syntax issues in react.d.ts declaration file in TypeScript

Currently, I am attempting to integrate react with typescript in my project. However, typescript is generating syntax errors for the react.d.ts file sourced from Github: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/react The encountered ...

Is it possible to transfer elements from one array to another when clicked, but without copying the contents to the new array objects?

Welcome, For my latest project, I am excited to create a "Learning Cards" App from scratch. The concept is pretty straightforward: it consists of cards with questions. Upon clicking a button, you can reveal the correct answer. Additionally, there's a ...

Refresh the content of <h:inputTextArea> upon string modification

Alright, so I have a somewhat trivial query to ask. I am looking to display the progress of various inserts/updates done on a database by using an <h:inputTextArea value="bean.status" disabled="true"/> within my view (with richfaces). The Bean is ess ...

What could be causing the format to be incorrect?

docker run -it -v "%cd%":/e2e -w /e2e cypress/included:6.2.1 --browser chrome When attempting to execute this command within Visual Studio Code, an error is encountered: docker: invalid reference format. See 'docker run --help' Vario ...

Updating multiple collections in MongoDBRestructuring data across multiple

Imagine a scenario where an API call must update two different collections. It's crucial that if one update fails, the first update needs to be reverted. How can I guarantee that both operations either complete successfully or none at all? Let me prov ...

validation of dialog forms

Is there a way to trigger the $("#form").validated() function from the ok button in a jquery-ui-dialog? Please note that I would prefer not to use a submit button within the form. ...

When I try to return JSON with AJAX, all I get is a blank page even though I

This week I started diving into the world of AJAX. I wanted to create a simple voting mechanism on an ASP MVC page where clicking a button would display a popup message (in the browser) and update the count accordingly - one button for incrementing, anothe ...

What are the benefits of keeping synchronous state in the Redux store?

Is it necessary to store non-async state in the Redux store? For instance, when dealing with a modal that simply shows or hides, is it worth the extra work to toggle it within the store? Wouldn't it be simpler to just keep it as local state in the Rea ...

Incorporate the AngularJS controller into your JavaScript code

I am facing an issue with my jQuery UI dialog that contains a dynamic <select> populated with Angular and AJAX. The problem is that the AngularJS script still runs even when the dialog is not visible. To solve this, I added a condition to stop the s ...

Tips on how to showcase particular keys from json information in React

Here is a sample of Json data that I have: [ { "serial_number": "test1", "added_at": "2021-02-05T18:58:43.382943Z", "ser_mod": [ { "added_at": "2021-02-06T02: ...