Как получить PromiseValue в XMLHttpRequest. JSON - PullRequest
Новая
       10

Как получить PromiseValue в XMLHttpRequest. JSON

0 голосов
/ 29 мая 2020

Как получить массив, расположенный на PromiseValue вместо Promise {<pending>} Пока я использую .then(data => console.log(data)) Я получаю массив в журнале консоли. Однако мне нужно получить массив, чтобы разместить его на странице html, поэтому я изменил код на .then(data => data) и начал получать 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);

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 31 мая 2020

sendRequest() выполнит asyn c. Это означает, что сценарий продолжается, даже если данные не загружены. Таким образом, последняя строка console.log(getData) уже появится до того, как будут загружены какие-либо данные.

Вот для чего можно использовать обещания: 

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

Другой вариант - использовать asyn c и ждите. Но это не работает в старых браузерах. 

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

let getData = await sendRequest('GET', baseUrl + '/users');
console.log(getData);
0 голосов
/ 31 мая 2020

Я думаю, вам нужно будет вернуть значение data, как указано здесь , чтобы выполнить обещание

Когда обещание, возвращаемое sendRequest, будет разрешено, оно немедленно передаст новое обещание getData. 

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

выглядит примерно так 

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 
})

Посмотрите на этот вопрос

...