Question

我正在研究JavaScript项目，在该项目中我们调用一些SOAP API来接收数据，然后将其显示在前端。托管后端的服务器有时可能会关闭，从而导致API调用失败。我想将所有API调用排入队列，当服务器关闭时失败，并继续轮询服务器，直到它重新联机，然后开始从队列中出队API请求以从前端处理它们。有人可以帮我解释一下可以用JavaScript实现吗？

我正在使用简单的javascript http请求来调用API。当前，我们要做的是如果API失败，我们会不断反复调用它一段时间，直到它给出响应为止。这种方法的问题是，如果有多个不同的API错误，则仅跟踪最后一个。我想跟踪所有失败的API调用，并在服务器重新联机后依次调用它们。如果可以不使用外部库就可以完成。

当前代码：

API调用：

function sendXmlRequest(payload) {
// Build http request
var http = new XMLHttpRequest();
http.open('POST', endpoint, true);
http.timeout = 30000;
http.setRequestHeader('Content-type', 'text/xml');

http.onreadystatechange = function() {
  if (http.readyState === 4 && http.responseXML) {
    if (http.status === 200) {
      setResponsePayload(http.responseXML.documentElement);
    } else if (http.status === 500) {
      setErrorResponsePayload(http.responseXML.documentElement);
    }
  }
};

http.onerror = function() {
  setErrorResponse();

}
http.ontimeout = function() {
  setErrorResponse();
}

// Send request
http.send(payload);
}

正在重试：

function retryConnection() {
 setTimeout(function() {
   sendXmlRequest(payload);
 }, 2000);
}

Answer 1

您可以执行以下操作：

var fetch = {
  queue: [],
  request : function (url, method) {
    // Create the XHR request
    var request = new XMLHttpRequest();
    var self = this;
    // Return it as a Promise
    return new Promise(function (resolve, reject) {
      // Setup our listener to process compeleted requests
      request.onreadystatechange = function () {
        // Only run if the request is complete
        if (request.readyState !== 4) return;
        // Process the response
        if (request.status >= 200 && request.status < 300) {
          // If successful
          resolve(request);
        } else {
          self.queue.push({url, method});
          // If failed
          reject({
            status: request.status,
            statusText: request.statusText
          });
        }
      };
      // Setup our HTTP request
      request.open(method || 'GET', url, true);
      // Send the request
      request.send();
    });
  },
  retry: function() {
    var self = this;
    this.queue.forEach(function(meta) {
        console.log(meta);
        self.request(meta.url, meta.method).then(
          () => self.queue.filter(e => e.url !== meta.url && e.method !== meta.method)
        );
    });
  }
};


setInterval(() => {
  fetch.retry();
}, 10000);
// Success case.
fetch.request('https://api.github.com/emojis','GET')
  .then(console.log, console.error);
//Error case.
  fetch.request('https://api.github.com/eee','GET')
  .then(console.log, console.error);

首先，我有对象fetch，它由3部分组成：

var fetch = {
  queue: [], // on error, we add url and method on the queue.
  request : function (url, method) {
    // Perform request.
  },
  retry: function() {
    // Retry what ever you have on queue. Remove when success.
  }
};

然后，根据请求，当发生某些错误时，我在队列数组中添加了重播请求所需的所有信息。

另一方面，重试方法将在此队列上循环，并重播所有失败的请求。

为了使代码尽可能简单，我在代码中引入了弱点。如果您想操纵来自后端的Ajax请求答复，并且如果该请求失败，那么请尝试几次，然后排队并成功。您实际上无法使用它来检索api答案。

如果这种情况对您很重要，请告诉我，我将建议另一个（更复杂的）方法。

在没有可用连接的情况下存储HTTP / SOAP请求

1 个答案: