Assurance that request does not result in any value being returned

Question

Assurance that request does not result in any value being returned

I have come across this interesting challenge:

function getAPI(token)
{
return new Promise((resolve, reject) => {
    console.log("Requesting API");
    GM_xmlhttpRequest({
        method: "GET",
        url: "URL"+token,
        onload: function(response) {
            console.log(response.responseText);
            if( response.responseText == "NOT_ANSWER" || response.responseText.indexOf("ERRO") > -1 ){
                console.log(response.responseText + " - Recursive call in 5 Seconds");
                setTimeout(function(){
                    getAPI(token);
                },5000);
            }
            else{
                console.log('Call API - Result obtained');
                resolve(response.responseText.split("_")[1]);
            }
        }
    });
});

}

I find it intriguing how I call the function within itself when the answer is not as expected, always waiting at least 5 seconds.

This leads me to the main function where I execute:

setTimeout( function(){
                getAPI(token).then((key) => {
                    console.log(key);
                    doSomethingWithKey;
                    setTimeout( function(){
                        loop();
                    },1000);
                }).catch(() => {
                    console.log('Error in API - reloading page!');
                    location.reload();
                });
            },25000);

However, I have noticed a strange behavior. When getAPI calls itself due to unexpected answers, the '.then' block in the main function does not seem to run, causing my code to hang indefinitely. How can I address this issue? I am still learning about promises and struggling to understand why this happens...

javascript promise request tampermonkey gm-xmlhttprequest

Answer 1

Answer №1

When the answer is not as expected, I refer to it within itself,

However, if you fail to invoke the resolve function of the promise returned by the initial getAPI call, the promise will remain unresolved and your then callback will not receive any output.

To address this issue, consider promisifying your asynchronous functions such as GM_xmlhttpRequest and setTimeout at a fundamental level before chaining promises. By returning the result of the recursive call within a then callback, the resulting promise will resolve with the same outcome:

function xhrAsync(url) {
    return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
            method: "GET",
            url: url,
            onload: resolve
        });
    });
}
function delayAsync(time) {
    return new Promise(resolve => {
        setTimeout(resolve, time);
    });
}
function getAPI(token) {
    console.log("Request API");
    return xhrAsync("URL"+token).then(response => {
//  ^^^^^^                       ^^^^
        console.log(response.responseText);
        if (response.responseText == "NOT_ANSWER" || response.responseText.includes("ERRO")) {
            console.log(response.responseText + " - Calling Myself in 5 Seconds");
            return delayAsync(5000).then(() => {
//          ^^^^^^                  ^^^^
                return getAPI(token);
//              ^^^^^^
            });
        } else {
            console.log('Call API - Giving Result');
            return response.responseText.split("_")[1];
        }
    });
}

Answer 2

When the answer is not as expected, I refer to it within itself,

However, if you fail to invoke the resolve function of the promise returned by the initial getAPI call, the promise will remain unresolved and your then callback will not receive any output.

To address this issue, consider promisifying your asynchronous functions such as GM_xmlhttpRequest and setTimeout at a fundamental level before chaining promises. By returning the result of the recursive call within a then callback, the resulting promise will resolve with the same outcome:

function xhrAsync(url) {
    return new Promise((resolve, reject) => {
        GM_xmlhttpRequest({
            method: "GET",
            url: url,
            onload: resolve
        });
    });
}
function delayAsync(time) {
    return new Promise(resolve => {
        setTimeout(resolve, time);
    });
}
function getAPI(token) {
    console.log("Request API");
    return xhrAsync("URL"+token).then(response => {
//  ^^^^^^                       ^^^^
        console.log(response.responseText);
        if (response.responseText == "NOT_ANSWER" || response.responseText.includes("ERRO")) {
            console.log(response.responseText + " - Calling Myself in 5 Seconds");
            return delayAsync(5000).then(() => {
//          ^^^^^^                  ^^^^
                return getAPI(token);
//              ^^^^^^
            });
        } else {
            console.log('Call API - Giving Result');
            return response.responseText.split("_")[1];
        }
    });
}

Answer 3

Answer №2

Each time you invoke the getAPI function, a brand new promise is created and returned.

Instead of having getAPI call itself or creating multiple promises, consider refactoring it to only retry the specific part that needs to be retried. Here's an example:

function getAPI(token) {
    return new Promise((resolve, reject) => {
        // Function to handle the API request
        function doRequest() {
            console.log("Making API Request");
            GM_xmlhttpRequest({
                method: "GET",
                url: "URL" + token,
                onload: function(response) {
                    console.log(response.responseText);
                    if (response.responseText == "NOT_ANSWER" || response.responseText.indexOf("ERRO") > -1) {
                        // Retry if not the expected result
                        console.log(response.responseText + " - Retrying in 5 Seconds");
                        setTimeout(doRequest, 5000);
                    }
                    else {
                        console.log('Successful API Call - Returning Result');
                        resolve(response.responseText.split("_")[1]);
                    }
                }
            });
        }
        doRequest();
    });
}

Note: Your usage of getAPI includes checking for promise rejection, but the promise never gets rejected within the getAPI function.

Answer 4

Each time you invoke the getAPI function, a brand new promise is created and returned.

Instead of having getAPI call itself or creating multiple promises, consider refactoring it to only retry the specific part that needs to be retried. Here's an example:

function getAPI(token) {
    return new Promise((resolve, reject) => {
        // Function to handle the API request
        function doRequest() {
            console.log("Making API Request");
            GM_xmlhttpRequest({
                method: "GET",
                url: "URL" + token,
                onload: function(response) {
                    console.log(response.responseText);
                    if (response.responseText == "NOT_ANSWER" || response.responseText.indexOf("ERRO") > -1) {
                        // Retry if not the expected result
                        console.log(response.responseText + " - Retrying in 5 Seconds");
                        setTimeout(doRequest, 5000);
                    }
                    else {
                        console.log('Successful API Call - Returning Result');
                        resolve(response.responseText.split("_")[1]);
                    }
                }
            });
        }
        doRequest();
    });
}

Note: Your usage of getAPI includes checking for promise rejection, but the promise never gets rejected within the getAPI function.

Assurance that request does not result in any value being returned

Answer №1

Answer №2

Similar questions

The function persists in outputting a true result, despite the fact that it is expected to output

Effortless pagination across various pages, utilizing diverse CSS selectors

Showing JSON object in an Angular 2 template展示JSON对象在模

Using a JavaScript variable inside a jQuery string

When extracting a value from an HTML textarea that contains multiple lines of text inputted by the user, the JSON becomes invalid

The state of my React components keeps disappearing

Vue 3 Router view fails to capture child's event

When attempting to open a popup form by clicking a button, the code fails to function on IE6

What is the most effective way to obtain the maximum innerHeight in a browser that is not set to 100% size

Invoke the Bootstrap function from a webpage

Is there a way to extract subtitles from a javascript-controlled webpage using Python?

Executing a <SCRIPT> within an Ajax-loaded webpage

Angular Compilation Blocked Due to Circular Dependency Error

`On mouseup event, changing specific text`

Verify the type of email domain (personal or corporate)

The setState function in ReactJS seems to be failing to properly update the fields

Pinia throws a useStore is not callable error

Automatically update local library dependencies with npm

"When attempting to pass a string into the res.send() method in Node.js, undefined

Exploring the Wonders of React Memo