如何在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。