xhr 设置超时 timeout

Posted 2023-03-19

参考技术A 有个同事使用了axios设置了Xhr的超时时间，她说默认的是30秒。

在 XMLHttpRequest 官方文档 中

在 XMLHttpRequest Level 2 使用指南 中

在 web超时配置总结
值得注意的一点是，超时时间的计算，是从调用xhr.send()开始，至xhr.loadend触发为止的这段时间。即时xhr.timeout的设置是在xhr.send()之后，timeout的计时起点仍为调用xhr.send()的时刻。

其实会了XMLHttpRequest的超时设置，其他前端的框架啊、工具啊的超时设置都不再是问题，这就有点万法归宗的意思。因为我们常用的jQuery.ajax()方法实际上就是对浏览器提供的XMLHttpRequest对象的封装。而又有很多其他框架或者工具的请求模块是对jQuery.ajax()的封装。说到底，都是依赖的XMLHttpRequest对象。因此掌握了XMLHttpRequest，其他都很好学会。
依jQuery.ajax()的超时设置为例：

另外还有设置nginx代理超时设置、服务端超时设置。

更多参考 你真的会使用XMLHttpRequest吗？

ajax设置自定义请求头

1,

$.ajax({
    url:apiUrl,
    type:"get",
    timeout : 5000, //超时时间设置，单位毫秒
    dataType: "json",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authorization", "Bearer "+obj.data);
        xhr.setRequestHeader("Accept", "application/json");
    },
    success:function(obj){
        dealApiInterfaceResult(resourceId, obj);
    }
})

2,

$.ajax({
    url:apiUrl,
    type:"get",
    timeout : 5000, //超时时间设置，单位毫秒
    dataType: "json",
    headers: {
             ‘Authorization‘:"Bearer "+obj.data,
             ‘Accept‘:"application/json"
         },
    success:function(obj){
        dealApiInterfaceResult(resourceId, obj);
    }
})