reactjs - 中断超级代理中的发布请求答案

【问题标题】：reactjs - interrupting a post request in superagentreactjs - 中断超级代理中的发布请求
【发布时间】：2017-10-22 11:36:40
【问题描述】：

我正在尝试计算文件上传的进度，所以我使用了Superagent。我能够得到文件上传的进度。

现在当用户选择取消按钮时，我需要中断或取消发布请求。有没有办法做到这一点。以下是我的代码：

var file = somefile.pdf
Request.post('http://posttestserver.com/post.php?dir=example')
  .set("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8")
  .send(file)
  .on('progress', function(e) {
    console.log('Progress', e.percent);
  })
  .end((err, res) => {
      console.log(err);
      console.log(res);
  })

【问题讨论】：

标签： javascript reactjs superagent

【解决方案1】：

经过一些研究，我找到了interrupt 或 cancel 或 abort 和 superagent request 的方法。以下代码将起作用：

var file = somefile.pdf
var req = Request.post('http://posttestserver.com/post.php?dir=example')
  .set("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8")
  .send(file)
  .on('progress', function(e) {
    if (condition) {
      req.abort() // to cancel the request
    }
    console.log('Progress', e.percent);
  })
  .end((err, res) => {
      console.log(err);
      console.log(res);
  })

更多信息来自他们的docs

.abort()

应该中止请求

var req = request
  .get(uri + '/delay/3000')
  .end(function(err, res){
    try {
    assert(false, 'should not complete the request');
    } catch(e) { done(e); }
      });
  req.on('error', function(error){
    done(error);
  });
  req.on('abort', done);
  setTimeout(function() {
    req.abort();
  }, 500);

应该允许多次链接 .abort()

var req = request
  .get(uri + '/delay/3000')
  .end(function(err, res){
    try {
    assert(false, 'should not complete the request');
    } catch(e) { done(e); }
  });
  // This also verifies only a single 'done' event is emitted
  req.on('abort', done);
  setTimeout(function() {
    req.abort().abort().abort();
  }, 1000);

【讨论】：

anaconda.zoom.us/j/…

【解决方案2】：

所选答案不再正确。 superagent 的文档也没有提到一个模糊的 req 变量，该变量在任何地方都没有定义。

事实是：

.end()返回undefined(since this commit)
.then() 返回一个 Promise

.end() 或多或少已被弃用，其文档有误：

    /*
     * Initiate request, invoking callback `fn(res)`
     * with an instanceof `Response`.
     *
     * @param {Function} fn
     * @return {Request} for chaining
     * @api public
     */

    Request.prototype.end = function (fn) {
      if (this._endCalled) {
        console.warn("Warning: .end() was called twice. This is not supported in superagent");
      }
      this._endCalled = true;

      // store callback
      this._callback = fn || noop;

      // querystring
      this._finalizeQueryString();

      this._end();
    };

解决方案：

var chain = request.get(uri + '/delay/3000');

chain.end(function(err, res){
    try {
        assert(false, 'should not complete the request');
    } catch(e) { done(e); }
});

setTimeout(function() {
    chain.req.abort();
}, 1000);

【讨论】：

SuperAgent 需要更新他们的文档。当实现为 async/promise 时，请求不能被取消。

【解决方案3】：

试图弄清楚如何使用 Promise 取消工作，我做了以下事情：

var req = request.get('/');

req.then((response) => { 
  // do work 
}).catch((error) => {});

req.xhr.abort();

【讨论】：

req.abort() 由于某些原因无法正常工作，但 req.xhr.abort() 工作正常。谢谢！