javascript - 我不懂 Ajax、Promise 和 XMLHttpRequest

Question

这是我的代码:

const getXHR = (type, url) => {

  let xhr = new XMLHttpRequest();

  let p = new Promise(function(resolve, reject) {

    xhr.onload = function() {
        if(xhr.status >= 200 && xhr.status < 400) {
            resolve(xhr.responseText);
        } else {
            reject(new Error(`Error. Code ${xhr.status}`))
        }
    };

    xhr.onerror = function() {
        reject(new Error(`Error. Problem with connection`));
    }

});

xhr.open(type, url);

return {xhr, p};

};

export default {

get(url) {

  var _getXHR = getXHR('GET', url),
      xhr = _getXHR.xhr,
      p = _getXHR.p;

    xhr.send();

    return p;

  }
}

我不明白为什么我必须使用这段代码才能让它工作:

var _getXHR = getXHR('GET', url),
      xhr = _getXHR.xhr,
      p = _getXHR.p;

而不是这个:

var xhr = getXHR('GET', url).xhr,
    p = getXHR('GET', url).p;

这有什么问题吗？对我来说，这是完全相同的代码行。我将不胜感激任何形式的帮助。也许有人有一个链接，我可以在其中找到答案？

谢谢

Answer 1

var xhr = getXHR('GET', url).xhr,
p = getXHR('GET', url).p;

创建两个请求，然后获取第一个请求的 xhr 对象和第二个请求的 Promise。第一个 xhr 请求已发送，其中一个 Promise 始终处于待处理状态。所以这可能不起作用。可以使用一些解构:

var { p, xhr } = getXHR('GET', url);
xhr.send();
return p;