What is the best method to prevent loading on axios.interceptors.request in an ionic vue interceptor?

I have been following a helpful tutorial and implementing the code from it. The tutorial can be found at the link below:

Within the tutorial, there is a function being called that triggers on every axios request. Here is the code snippet for reference:

mountRequestInterceptor() {
        this._requestInterceptor = axios.interceptors.request.use(async config => {
            console.log("show loading");
            const loading = await loadingController.create({
                message: 'Please wait...'
            });
            await loading.present();
           
                
           
            
            return config;
        });
        console.log(this._requestInterceptor,'sasdas')
    },

The issue I am facing is that the loading indicator starts when an axios request is made but never stops.

I am looking for a solution to make the loading indicator stop once the request is successfully completed.

Answer №2

I've encountered the same issue as well, but there's a simple fix for it. You just need to include a function that checks if the loadingController is still active. The problem lies in the fact that the loading doesn't stop because the function keeps adding another loadingController while processing data.

To address this problem, you can implement the following function to verify the status of the loadingController:

const checkLoading = await loadingController.getTop();

With this check in place, you can modify your function like so:

mountRequestInterceptor() {
        this._requestInterceptor = axios.interceptors.request.use(async config => {
            const checkLoading = await loadingController.getTop();
            if (!checkLoading) {
                console.log("show loading");
                const loading = await loadingController.create({
                    message: 'Please wait...'
                });
                await loading.present();
            }
            return config;
        });
    },

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 href appending function will succeed in Ajax if the inArray method is used effectively

Once upon a time, I thought I had nailed it with my ajax login, but alas, I was mistaken. The ajax login feature was working like a charm, perfectly appending the username to a link. Everything was going smoothly until I wanted to implement a page refres ...

What is the best way to update and add data with just one click using jQuery?

Trying to dynamically add text to textboxes by clicking an "add" button. The code allows for adding/removing textboxes that save values to and delete from a database. Upon page load, a function called showitem creates textboxes dynamically and populates th ...

Is there a way to transfer gulp.watch() to a pipe?

Currently, I have a basic task set up for linting changed JavaScript files: gulp.task('default', function() { // monitor JS file changes gulp.watch(base + 'javascripts/**/*.js', function() { gulp.run(&ap ...

When attempting to retrieve JSON data for the second time, AJAX fails to fetch the information

After successfully sending an Ajax request to a php file and receiving a JSON array of the submitted data, I encountered an error on the second attempt. The error message reads: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSO ...

Is it possible to capture a Browser TAB click event using JavaScript or AngularJS?

How can I trigger an event when returning to a tab? For instance: Let's say I have opened four tabs in the same browser with the same URL: such as: http://127.0.0.1:/blabla http://127.0.0.1:/blabla http://127.0.0.1:/blabla http://127.0.0.1:/blabla ...

Placing numerous meshes that are mostly alike but not exactly the same in a scene

We utilize a single geometry that is attached to every mesh within our scene. var geometry = new three.PlaneGeometry(1, 1, 1, 1), Each object has a texture that is generated and cached to form a new material and a mesh for the object. this.material = ne ...

Incorporating a JavaScript variable into an inline HTML onclick event

Having trouble passing a variable into an inline onclick function. I've tried researching and following suggestions from this link, but encountered errors (Uncaught SyntaxError: missing ) after argument list): pass string parameter in an onclick func ...

Unable to assign a value to a static context of a different module (resulting in undefined when attempting to assign)

I am currently working on developing an Ionic app and in order to streamline my code, I have decided to separate certain elements into different modules and import them. However, I am facing an issue where I am receiving 'undefined' when trying t ...

How to achieve horizontal auto-scrolling in an image gallery with jQuery?

Hey there, I'm currently working on an Image Gallery project. I have arranged thumbnails horizontally in a div below the main images. Take a look at this snapshot img. My goal is to have the thumbnails scroll along with the main pictures as the user ...

Is it possible to use the inheritance type for a function parameter derived from an object?

When working with Angular, I have been using TypeScript for some time now. Previously, I used to set function parameter types in a hardcoded way, as shown below: login(email: string) {} However, I recently tried to inherit from another object and changed ...

`Sending binary data to client through GraphQL: A comprehensive guide`

I have a GraphQL server running on express. I am looking for a way to send images back to the client using nodejs buffer objects instead of JSON. How can I configure my graphql server to return bytes directly, without encoding them in base64 due to large ...

What could be causing the Fontawsome icon to malfunction within a Bootstrap table item?

I am currently utilizing Fontawsome free version 5.15.4, along with Bootstrap 5.1 to develop a table using JavaScript. let newBtn = createAnyElement("button", { class: "btn btn-success", onclick: "createUser(this)&q ...

What's better in React: using pure components or non-pure components? Is it okay to fetch data in componentDidMount or

Exploring React in Meteor has led me to observe two distinct approaches... Take the meteor leaderboard example, where a list of players displays their names and scores. The pure approach involves fetching all players and passing them into the playersList ...

comparing values in an array with jquery

I am attempting to retrieve the phone number and mobile number from an array using jquery. jQuery: var data = $('#PhoneLabel').text(); var array = data.split(', '); $.grep(array, function (item, index) { if (item.charAt(0) === &ap ...

What is the process for attaching an iterator to the name value of every element within a cloneNode?

Consider the following scenario: <div id="addNewMenuElementPart2"> Numerous elements with a name attribute are present here. </div> <div id="addNewMenuElementPart3Optional"></div> Additionally, t ...

Tips on creating a bot that patiently waits for responses before asking follow-up questions

I'm trying to develop my own bot for economics, but I've hit a snag. My goal is to have the bot ask a question, wait for an answer, and then ask another question, and so on. Can anyone offer some guidance on this issue? Here's the code I hav ...

Fetching from the same origin results in a null comparison issue due to HTTP CORS restrictions

Encountering an issue where a simple same-origin fetch("fetch.xml") call fails, resulting in a console error message Access to fetch at 'http://127.0.0.1:8000/fetch.xml' from origin 'null' has been blocked by CORS policy: Th ...

Rotate object within HTML table

I have a simple data structure as shown below: [ { "ClientId": 512, "ProductId": 7779, "Date": "2019-01-01", "Quantity": 20.5, "Value": 10.5 }, { "ClientId": 512, "ProductId": ...

Retrieving the first five rows from a table with data entries

My task involves working with a table named mytbl, which contains 100 rows. I need to extract only the first five rows when a user clicks on "Show Top Five." Although I attempted the following code, the alert message returned 'empty': var $upda ...

Regular expression to match only alphanumeric characters without any numbers at the start or end

Creating a regex pattern that only matches letters and numbers, not allowing numbers at the beginning or end: johnDoe123 is acceptable 4janeDoe is not acceptable johndoe5 is not acceptable john_doe is not acceptable Attempted solution: [a-z0-9_] Unfortu ...