Использование обещания GET over XHR возвращает ожидающее обещание - PullRequest
Новая
       7

Использование обещания GET over XHR возвращает ожидающее обещание

0 голосов
/ 31 декабря 2018

Я пытаюсь использовать обещания для асинхронных запросов через XHR.Я могу console.log мой результат изнутри .then, но снаружи он возвращает в ожидании. 

function initRequest(url) {
  return new Promise(function(resolve, reject) {
    xhr.open("GET", url, true);
    xhr.onload = function(e) {
      // check if XHR transaction is complete
      if (xhr.readyState === 4) {
        // if it is, do the things
        if (xhr.status === 200) {
          // Parse outfitList
          responseText = JSON.parse(xhr.response)
          resolve(this.responseText);
          // Print outfitList to cards
          var div = document.getElementById('outfitCards');
          //return outfitList;

          // If it can't, do an error
        } else {
          console.error(xhr.statusText);
        }
      }
    };
    xhr.setRequestHeader("Content-type", "x-www-form-urlencoded");
    xhr.send();
  });
}

var newResult = initRequest('/outfits/outfitList')
  .then(function(result) {
    console.log(result)
    resolve(result);
  })
  .catch(function() {
    console.log('err')
  });

console.log(newResult);

result это массив, который выглядит хорошо, когда я console.log (результат).console.log(newResult) однако возвращает ожидающее обещание.

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Я думаю, что в вашем коде отсутствует состояние reject, возможно, ваш запрос не был выполнен должным образом.Попробуйте этот улучшенный код: 

function initRequest(url) {
    return new Promise(function (resolve, reject) {
        xhr.open("GET", url, true);
        xhr.onload = function (e) {
            // check if XHR transaction is complete
            if (xhr.readyState === 4) {
                // if it is, do the things
                if (xhr.status === 200) {
                    // Parse outfitList
                    responseText = JSON.parse(xhr.response)
                    resolve(this.responseText);
                    // Print outfitList to cards
                    var div = document.getElementById('outfitCards');
                    //return outfitList;

                    // If it can't, do an error
                }
                else {
                    console.error(xhr.statusText);
                    reject(xhr.statusText);
                }
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.setRequestHeader("Content-type", "x-www-form-urlencoded");
        xhr.send();
    });
}

И: 

var newResult = initRequest('/outfits/outfitList')
    .then(function (result) {
        console.log(result)
        resolve(result);
    })
    .catch(function () {
        console.log('err');
        reject('error in request');
    });
0 голосов
/ 31 декабря 2018

Это также ожидаемое поведение.Вы поняли, как ведет себя асинхронный код?

console.log(newResult) запускается до этого: 

var newResult = initRequest('/outfits/outfitList')
    .then(function (result) {
        console.log(result)
        resolve(result);
    })
    .catch(function () {
        console.log('err')
    });

Вы должны работать с результатами внутри обратного вызова .then(): 

  var newResult = initRequest('/outfits/outfitList')
    .then(function (result) {
        // Do your stuff with results here

    })
    .catch(function () {
        console.log('err')
    });

Если вы считаете, что его трудно читать, вы можете попробовать использовать async/await вместо 

var result = await initRequest('/outfits/outfitList')
console.log(result)
...