Ways to access PromiseValue in XMLHttpRequest with JSON

Question

Ways to access PromiseValue in XMLHttpRequest with JSON

Is there a way to access an array that is within the PromiseValue instead of receiving Promise {<pending>} When I use

.then(data => console.log(data))

, I can see the array in the console log. However, my requirement is to display this array on an HTML page. So, I modified the code to .then(data => data) and now it returns Promise {<pending>}

const baseUrl = 'http://localhost:3000';

function sendRequest(method, url, data = null) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();

        xhr.open(method, url);

        xhr.responseType = 'json';
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onload = () => {
            if (xhr.status >= 400) {
                reject(xhr.response);
            } else {
                resolve(xhr.response);
            }
        }

        xhr.onerror = () => {
            reject(xhr.response);
        }

        xhr.send(JSON.stringify(data));
    });
}

let getData = sendRequest('GET', baseUrl + '/users')
.then(data => data)
.catch(err => console.log(err));

console.log(getData);

I appreciate any help with this issue.

javascript json promise xmlhttprequest

Answer 1

Answer №1

When you use the function sendRequest(), it will execute asynchronously. This means that the script will continue running even before the data is fully loaded. As a result, the last line <code>console.log(getData)

will be executed before any data is actually loaded.

This is where promises come in handy:

sendRequest('GET', baseUrl + '/users')
    .then(function(data){
        // The response can only be processed in the .then part. 
        // You can also call other functions using the fetched data
        console.log(data);
    })
    .catch(err => console.log(err));

Another approach would be to use async and await. However, this method may not work in older browsers.

async function sendRequest(method, url, data = null) {
// your current xhr code
}

let getData = await sendRequest('GET', baseUrl + '/users');
console.log(getData);

Answer 2

When you use the function sendRequest(), it will execute asynchronously. This means that the script will continue running even before the data is fully loaded. As a result, the last line <code>console.log(getData)

will be executed before any data is actually loaded.

This is where promises come in handy:

sendRequest('GET', baseUrl + '/users')
    .then(function(data){
        // The response can only be processed in the .then part. 
        // You can also call other functions using the fetched data
        console.log(data);
    })
    .catch(err => console.log(err));

Another approach would be to use async and await. However, this method may not work in older browsers.

async function sendRequest(method, url, data = null) {
// your current xhr code
}

let getData = await sendRequest('GET', baseUrl + '/users');
console.log(getData);

Answer 3

Answer №2

It appears that in order to fulfill the promise, you need to return the value of data, as indicated here.

Once the promise generated by sendRequest is resolved, a new promise will be immediately passed to getData.

.then(data => { 
      return data;
})
.catch (err => { 
      console.log(err);
})

This is similar to the following example:

function sendRequest(s){
  return new Promise((resolve, reject) => {
       resolve(s) ; 
  });
}

let getData = sendRequest("test")
 .then(value => {
    return value;
})

getData.then(value => {
    console.log( value);
    //access value 
})

You can refer to this question for more information.

Answer 4

It appears that in order to fulfill the promise, you need to return the value of data, as indicated here.

Once the promise generated by sendRequest is resolved, a new promise will be immediately passed to getData.

.then(data => { 
      return data;
})
.catch (err => { 
      console.log(err);
})

This is similar to the following example:

function sendRequest(s){
  return new Promise((resolve, reject) => {
       resolve(s) ; 
  });
}

let getData = sendRequest("test")
 .then(value => {
    return value;
})

getData.then(value => {
    console.log( value);
    //access value 
})

You can refer to this question for more information.

Ways to access PromiseValue in XMLHttpRequest with JSON

Answer №1

Answer №2

Similar questions

Why would one utilize window.location?.search?.split?

Inject a DOM event into a personalized form validator within an Angular application

What sets apart "config" from "defaults" in Sencha Touch?

Is it possible to include a value for the "src" attribute rather than the "class" attribute in the array of values in list.js?

Trouble with unproductive downtime in ReactJS and JavaScript

Transmitting an array of objects via Ajax to PHP

Switching icon images using JQuery based on state changes

Is it possible to include indices in a list of hashes when sending an Ajax request to the controller in JSON format?

Error: Attempting to access an undefined property

Error in Next.js: Trying to destructure an undefined object in useContext

Using Typescript with Protractor for Dropdown Menus

Sending JSON data from Flutter to a fresh Stateful Widget

Struggling with implementing conditional validators in Angular2 form models. I have tried using myForm.setValidators(), but it doesn't appear to be functioning as expected

Ensure the initial word (or potentially all words) of a statement is in uppercase in Angular 2+

sending an array via xmlhttprequest

The designated redirection path, as indicated in the 'next.config.js' file for a particular project, has now been applied to all projects

Angular's separate scope variables allow for isolated data manipulation within individual components

What is the syntax for referencing a nested dictionary within a Python dictionary?

Loop through a hash while my value keeps fluctuating with each iteration

Variable Returned by AJAX