带请求超时的fetch插件

项目中使用的fetch插件没有设置请求超时的属性，在部分场景中需要使用到请求超时提醒，考虑在fetch的基础上编写一个带请求超时的插件

本身fetch是根据promise开发的，考虑使用promise中的race配合settimeout来实现这个需求，下面贴上插件代码

(function (self) {
    "use strict";

    //默认的超时时间
    var options={
        timeout:20000
    };

    self.sqfetch=function(url,init,opts){
        if(opts) {
            for (var key in opts) {
                options[key] = opts[key];
            }
        }
        var fetchPromise=fetch(url, init);
        var timeoutPromise=new Promise(function(resolve, reject){
            setTimeout(function(){
                reject("timeout");
            },options.timeout);
        });
        return Promise.race([fetchPromise, timeoutPromise]);
    };
})(typeof self !== 'undefined' ? self : this);

使用时直接使用sqfetch(url,opts,timeout)即可，opts为fetch中相关的请求参数，timeout为自定义的options，如：

sqfetch(url,{headers:{'Authorization':token},method:'get'},{timeout:5000}).then(function(res) {
    ...
}).catch(function () {
    ...
})

 

传送门：

1. Promise文档：Promise - JavaScript | MDN