使用promise获得XHR将返回挂起的promise

Question

我试图使用promise通过XHR发出异步请求。我可以从内部将结果记录到console.log中，然后在外部返回pending。

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（result）时，它看起来很好<但是，code>console.log（newResult）返回一个挂起的promise。

Answer 1

我认为您的代码缺少拒绝状态，也许您的请求没有按预期完成。试试这个改进的代码：

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

Answer 2

这也是预期的行为。您了解异步代码的行为吗？

console.log（newResult）在此之前运行：

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

你应该在中处理你的结果。然后（）回调：

  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)