我如何保证原生XHR?


183

我想在我的前端应用程序中使用(本机)promise来执行XHR请求,但没有大型框架的所有傻子行为。

我希望我的XHR返回的希望,但是,这并不工作(给我:Uncaught TypeError: Promise resolver undefined is not a function

function makeXHRRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() { return new Promise().resolve(); };
  xhr.onerror = function() { return new Promise().reject(); };
  xhr.send();
}

makeXHRRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
});

Answers:


368

我假设您知道如何发出本机XHR请求(您可以在这里这里进行刷牙)

由于任何支持本机Promise的浏览器也将支持xhr.onload,因此我们可以跳过所有的onReadyStateChangetomfoolery。让我们退后一步,从使用回调的基本XHR请求函数开始:

function makeRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}

// And we'd call it as such:

makeRequest('GET', 'http://example.com', function (err, datums) {
  if (err) { throw err; }
  console.log(datums);
});

欢呼!这不涉及任何非常复杂的事情(例如自定义标头或POST数据),但足以使我们前进。

Promise构造函数

我们可以这样构造一个承诺:

new Promise(function (resolve, reject) {
  // Do some Async stuff
  // call resolve if it succeeded
  // reject if it failed
});

promise构造函数采用一个函数,该函数将传递两个参数(我们称它们为resolvereject)。您可以将它们视为回调,一个代表成功,另一个代表失败。示例很棒,让我们makeRequest使用此构造函数进行更新:

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

// Example:

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

现在,我们可以利用promise的功能,将多个XHR调用链接起来(并且.catch将在每次调用中触发错误):

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  return makeRequest('GET', datums.url);
})
.then(function (moreDatums) {
  console.log(moreDatums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

我们可以进一步改进它,添加POST / PUT参数和自定义标头。让我们使用带有签名的options对象而不是多个参数:

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object
}

makeRequest 现在看起来像这样:

function makeRequest (opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    // We'll need to stringify if we've been given an object
    // If we have a string, this is skipped.
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

// Headers and params are optional
makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

可以在以下位置找到更全面的方法 MDN

另外,您可以使用访APIpolyfill)。


3
您可能还需要添加responseType,身份验证,凭据等选项,timeout并且params对象应支持Blob / bufferview和FormData实例
Bergi 2015年

4
在拒绝时返回新的错误会更好吗?
prasanthv

1
另外,返回xhr.status并返回xhr.statusText错误没有意义,因为在这种情况下它们为空。
2015年

2
除了一件事外,这段代码似乎可以像宣传的那样工作。我期望将参数传递给GET请求的正确方法是通过xhr.send(params)。但是,GET请求将忽略发送到send()方法的任何值。相反,它们只需要是URL本身上的查询字符串参数。因此,对于上述方法,如果希望将“ params”参数应用于GET请求,则需要修改例程以识别GET与POST,然后有条件地将这些值附加到传递给xhr的URL 。打开()。
hairbo's October

1
同时应使用resolve(xhr.response | xhr.responseText);大多数浏览器中的response是responseText。
heinob

50

这可能和下面的代码一样简单。

请记住,此代码仅rejectonerror被调用时才触发回调(仅适用于网络错误),而不会在HTTP状态代码表示错误时触发。这还将排除所有其他例外。IMO,应由您自行处理。

另外,建议reject使用Error事件的实例而不是事件本身来调用回调,但是为了简单起见,我保持原样。

function request(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = resolve;
        xhr.onerror = reject;
        xhr.send();
    });
}

调用它可能是这样的:

request('GET', 'http://google.com')
    .then(function (e) {
        console.log(e.target.response);
    }, function (e) {
        // handle errors
    });

14
@MadaraUchiha我想这是它的tl; dr版本。它为OP提供了他们问题的答案,仅此而已。
Peleg

POST请求的正文在哪里?
caub 2015年

1
@crl就像在常规XHR中一样:xhr.send(requestBody)
Peleg

是的,但是为什么您的代码中不允许呢?(因为您对方法进行了参数设置)
2015年

6
我喜欢这个答案,因为它提供了非常简单的代码,可以立即使用它来回答问题。
史蒂夫·查麦拉德

12

对于现在搜索此内容的任何人,您都可以使用提取功能。它有一些很好的支持

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

我首先使用@SomeKittens的答案,但随后发现fetch它对我来说是开箱即用的:)


2
较早的浏览器不支持该fetch功能,但是GitHub已发布了polyfill
bdesham

1
我不推荐,fetch因为它还不支持取消。
James Dunne


在答案stackoverflow.com/questions/31061838/...有取消取代码示例,到目前为止,已经在Firefox 57+和16+的边缘
sideshowbarker

1
@ microo8最好有一个使用fetch的简单示例,这似乎是放置它的好地方。
jpaugh

8

我认为我们可以通过不创建最佳对象来使最佳答案更加灵活和可重用XMLHttpRequest。这样做的唯一好处是,我们不必自己编写2或3行代码即可这样做,而且它的巨大缺点是无法访问许多API功能(如设置标头)。它还从应该处理响应的代码中隐藏了原始对象的属性(无论成功还是错误)。因此,我们可以通过仅接受XMLHttpRequest对象作为输入并将其作为结果传递,从而实现更灵活,更广泛应用的功能

此函数将任意XMLHttpRequest对象转换为Promise,默认情况下将非200状态代码视为错误:

function promiseResponse(xhr, failNon2xx = true) {
    return new Promise(function (resolve, reject) {
        // Note that when we call reject, we pass an object
        // with the request as a property. This makes it easy for
        // catch blocks to distinguish errors arising here
        // from errors arising elsewhere. Suggestions on a 
        // cleaner way to allow that are welcome.
        xhr.onload = function () {
            if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                reject({request: xhr});
            } else {
                resolve(xhr);
            }
        };
        xhr.onerror = function () {
            reject({request: xhr});
        };
        xhr.send();
    });
}

此函数非常自然地适合Promises 链,而不会牺牲XMLHttpRequestAPI 的灵活性:

Promise.resolve()
.then(function() {
    // We make this a separate function to avoid
    // polluting the calling scope.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/');
    return xhr;
})
.then(promiseResponse)
.then(function(request) {
    console.log('Success');
    console.log(request.status + ' ' + request.statusText);
});

catch为了使示例代码更简单,在上面省略了该代码。您应该始终拥有一个,当然我们可以:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(promiseResponse)
.catch(function(err) {
    console.log('Error');
    if (err.hasOwnProperty('request')) {
        console.error(err.request.status + ' ' + err.request.statusText);
    }
    else {
        console.error(err);
    }
});

并且禁用HTTP状态代码处理不需要对代码进行太多更改:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(function(xhr) { return promiseResponse(xhr, false); })
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

我们的调用代码更长,但是从概念上讲,了解正在发生的事情仍然很简单。而且,我们不必为了支持其功能而重建整个Web请求API。

我们还可以添加一些便利功能来整理代码:

function makeSimpleGet(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    return xhr;
}

function promiseResponseAnyCode(xhr) {
    return promiseResponse(xhr, false);
}

然后我们的代码变为:

Promise.resolve(makeSimpleGet('https://stackoverflow.com/doesnotexist'))
.then(promiseResponseAnyCode)
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

5

我认为jpmc26的答案非常接近完美。但是,它有一些缺点:

  1. 它只公开xhr请求,直到最后一刻。这不允许POST -requests设置请求正文。
  2. 很难理解为关键 send -call隐藏在函数内部。
  3. 实际提出请求时,它引入了很多样板。

猴子修补xhr对象可解决以下问题:

function promisify(xhr, failNon2xx=true) {
    const oldSend = xhr.send;
    xhr.send = function() {
        const xhrArguments = arguments;
        return new Promise(function (resolve, reject) {
            // Note that when we call reject, we pass an object
            // with the request as a property. This makes it easy for
            // catch blocks to distinguish errors arising here
            // from errors arising elsewhere. Suggestions on a 
            // cleaner way to allow that are welcome.
            xhr.onload = function () {
                if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                    reject({request: xhr});
                } else {
                    resolve(xhr);
                }
            };
            xhr.onerror = function () {
                reject({request: xhr});
            };
            oldSend.apply(xhr, xhrArguments);
        });
    }
}

现在的用法很简单:

let xhr = new XMLHttpRequest()
promisify(xhr);
xhr.open('POST', 'url')
xhr.setRequestHeader('Some-Header', 'Some-Value')

xhr.send(resource).
    then(() => alert('All done.'),
         () => alert('An error occured.'));

当然,这带来了一个不同的缺点:猴子修补确实会损害性能。但是,假设用户主要在等待xhr的结果,请求本身花费的时间比建立呼叫长且xhr请求不经常发送,则这应该不是问题。

PS:当然,如果要针对现代浏览器,请使用fetch!

PPS:在评论中已经指出,此方法更改了标准API,这可能会造成混淆。为了更好的说明,可以在xhr对象上修补另一种方法sendAndGetPromise()


我避免猴子打补丁,因为这很令人惊讶。大多数开发人员期望标准API函数名称调用标准API函数。这段代码仍然隐藏了实际的send调用,但是也会使那些send没有返回值的读者感到困惑。使用更明确的调用可以使调用其他逻辑更加清晰。我的答案确实需要调整以处理的论点send;但是,fetch现在最好使用。
jpmc26 '19

我想这取决于。如果您返回/公开xhr请求(无论如何似乎都是可疑的),那是绝对正确的。但是,我不明白为什么不在模块内不执行此操作,而只公开所产生的承诺。
t.animal

我指的是必须维护您在其中执行代码的任何人
。– jpmc26

就像我说的:这取决于。如果您的模块太大,在其余的代码之间丢失了promisify函数,那么您可能还会遇到其他问题。如果您有一个仅想调用一些端点并返回诺言的模块,那么我认为没有问题。
t.animal

我不同意这取决于代码库的大小。看到标准API函数除了执行标准行为以外还会做其他事情,这令人感到困惑。
jpmc26
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.