javascript - 回调数组作为 promise ？

Question

我正在处理一些使用 RPC/YUI 库处理网络请求的旧遗留代码。它本质上是创建标签来处理网络请求。这些没有 promise 。另外，由于 IE11 支持，我们不能使用 native Promise 对象。我们的构建过程不使用任何 NPM 依赖项，因此我们不能使用任何与 babel 相关的 polyfill。

我正在努力解决一个错误，每次另一个函数调用相同的函数时参数 ignoreError 都会被覆盖……很明显!我们有多个函数调用这个网络请求函数库。有时我们想忽略一个错误，有时我们不想。

存储发出的多个请求及其各自的错误回调以便调用适当的项目的理想方式是什么？

例子:

var rpcUrl,
rpcRetries,
rpcIgnoreError;

// main function that sets some globals:
rpc: function(url, retries, ignoreError) {
  rpcUrl = url;
  rpcRetries = retries;
  rpcIgnoreError = ignoreError;
  this.doRpc();
},
// calls the YUI library to initialize network script:
doRpc: function() {
  YAHOO.util.Get.script(rpcUrl, {
    onFailure: function() {
      this.callbackError(true);
    },
    timeout: 55000
  });
},
// YUI callback
callbackError: function(retry) {
  if (retry && rpcRetries > 0) {
    rpcRetries = rpcRetries - 1;
    this.doRpc();
  } else {
    // ** how do i know this error handling is for the script which failed?
    if (!rpcIgnoreError) {
      this.populateFormStatus(6);
    }
  }
},

现在，我们有多个调用 rpc() 的函数，例如:

sendConfig: function() {
  this.rpc(urlForEndpoint, 3, true);
},
sendUser: function() {
  this.rpc(urlForEndpoint, 3, false);
},
sendWidget: function() {
  this.rpc(urlForEndpoint, 3, false);
},

我担心制作回调数组并不能保证每个项目都由其各自的处理程序处理。

我可以做一些事情，比如创建一个 map 常量:

var RPC_ERR_CB = {
    sendConfig: false,
    sendUser: true,
    sendWidget: true
};

//然后在onFailure 回调中，我可以读取脚本标签的src:

...
doRpc: function() {
  YAHOO.util.Get.script(rpcUrl, {
    onFailure: function() {
      var hasCB = Object.keys(RPC_ERR_CB).some(function(item) {
        return arguments[0].src.indexOf(RPC_ERR_CB[item]) <= 0;
     });
      if (hasCB) {
        this.callbackError(true);
      }
    },
    timeout: 55000
  });
},

希望这是有道理的...谢谢!

Answer 1

如果您不能使用 Promises 或 ES6 类，您的选择就会变得有些受限。如果可能的话，我建议硬着头皮获取 Babel 转译过程，这样您就可以利用更新的功能，而无需放弃对 IE11 的支持。

尽管如此，理想情况下您不希望在某处的全局变量中跟踪每个请求。您可以通过将每个请求创建为独立对象来独立处理每个事务:

function RpcRequest (url, retries, ignoreError) {
  this.url = url
  this.retries = retries
  this.ignoreError = ignoreError
}

RpcRequest.prototype.send = function() {
  YAHOO.util.Get.script(this.url, {
    onFailure: function() {
      this.callbackError(true);
    },
    timeout: 55000
  });
}

RpcRequest.prototype.callbackError = function(retry) {
  if (retry && this.retries > 0) {
    this.retries = this.retries - 1;
    this.send();
  } else {
    if (!this.ignoreError) {

      // ...

    }
  }
}

// Somewhere else, initiate a request
var requestOne = new RpcRequest("http://blah", 3, false)
requestOne.send()

我在查看您的代码时注意到:创建请求的代码不知道请求是否成功。当出现错误时，调用上下文对那个错误一无所知。我查看了您提到的库，它似乎确实包含一些您可以传递的上下文。

如果我稍微重写一下，我会做这样的事情来将错误冒泡到您的调用上下文中:

RpcRequest.prototype.send = function(callback) {
  YAHOO.util.Get.script(this.url, {
    onFailure: function(context) {
      if( this.ignoreError ) {
        context.ignoredError = true
        callback(null, context);
        return;
      }

      var retError = new Error('Failure doing something!');
      retError.context = context;

      callback(retError);
    },
    onSuccess: function(context) {
      callback(null, context);
    },
    timeout: 55000
  });
}

// Somewhere else in the code...
sendWidget: function() {
  var request = new RpcRequest(urlForEndpoint, 3, false)
  request.send(function(err, result) {
    if( err ) {
      console.error('Failed at doing a widget thing:', err.context);
      // maybe even:
      // throw err;
      return;
    }

    if( result.ignoredError ) {
      console.warn('Ignored an error on the widget thing:', result);
      return;
    }

    console.log('Success on the widget thing!', result);
  })
}