如何在 d3 xhr 发送请求中指定超时

Question

我想设置一个超时值，以便如果服务器在该特定时间范围内没有响应，则UI应该继续前进，而不是等待响应。到目前为止，我已经使用了以下语法，但它并没有限制 UI 侦听指定的时间。

      d3.xhr(my_url)
        .header('Content-Type', 'text/xml')
        .header('timeout', 2000)
        .send(this.my_method, my_xmlData, function(error, data) {
        }

我在这里读到d3 xhr现在支持超时功能。谁能告诉我如何正确使用它？

Answer 1

只需将时间（以毫秒为单位）传递到timeout（在 4.x 版中）：

.timeout(time)

下面是一个示例。我将加载一个没有timeout的 JSON 文件：

var url = "https://mysafeinfo.com/api/data?list=englishmonarchs&format=json";
d3.json(url)
  .get(callback);
function callback(data) {
  console.log(data)
}

<script src="https://d3js.org/d3.v4.min.js"></script>

现在相同的代码，在超时中使用 1 毫秒（非常短的时间）：

var url = "https://mysafeinfo.com/api/data?list=englishmonarchs&format=json";
d3.json(url)
  .timeout(1)
  .get(callback);
function callback(data) {
  console.log(data)
}

<script src="https://d3js.org/d3.v4.min.js"></script>

如您所见，1 毫秒获取文件的时间太短，回调将按预期返回null。