fetch服务器不响应,fetch的常见问题及其解决办法

摘要&＃xff1a; 玩转fetch。

Fundebug经授权转载&＃xff0c;版权归原作者所有。

首先声明一下&＃xff0c;本文不是要讲解fetch的具体用法&＃xff0c;不清楚的可以参考MDN fetch教程。

引言

说道fetch就不得不提XMLHttpRequest了&＃xff0c;XHR在发送web请求时需要开发者配置相关请求信息和成功后的回调&＃xff0c;尽管开发者只关心请求成功后的业务处理&＃xff0c;但是也要配置其他繁琐内容&＃xff0c;导致配置和调用比较混乱&＃xff0c;也不符合关注分离的原则&＃xff1b;fetch的出现正是为了解决XHR存在的这些问题。例如下面代码&＃xff1a;

fetch(url)

.then(function(response) {

return response.json();

})

.then(function(data) {

console.log(data);

})

.catch(function(e) {

console.log("Oops, error");

});

上面这段代码让开发者只关注请求成功后的业务逻辑处理&＃xff0c;其他的不用关心&＃xff0c;相当简单&＃xff1b;也比较符合现代Promise形式&＃xff0c;比较友好。

fetch是基于Promise设计的&＃xff0c;从上面代码也能看得出来&＃xff0c;这就要求fetch要配合Promise一起使用。正是这种设计&＃xff0c;fetch所带来的优点正如传统 Ajax 已死&＃xff0c;Fetch 永生总结的一样&＃xff1a;

语法简单&＃xff0c;更加语义化

基于标准的Promise实现&＃xff0c;支持async/await

不过话说回来&＃xff0c;fetch虽然有很多优点&＃xff0c;但是使用fetch来进行项目开发时&＃xff0c;也是有一些常见问题的&＃xff0c;下面就来说说fetch使用的常见问题。

fetch兼容性

fetch是相对较新的技术&＃xff0c;当然就会存在浏览器兼容性的问题&＃xff0c;借用上面应用文章的一幅图加以说明fetch在各种浏览器的原生支持情况&＃xff1a;

从上图可以看出&＃xff0c;在各个浏览器低版本的情况下都是不被支持的。

那么问题来了&＃xff0c;如何在所有浏览器中通用fetch呢&＃xff0c;当然就要考虑fetch的polyfill了。

上面说过&＃xff0c;fetch是基于Promise来实现的&＃xff0c;所以在低版本浏览器中Promise可能也未被原生支持&＃xff0c;所以还需要Promise的polyfill&＃xff1b;大多数情况下&＃xff0c;实现fetch的polyfill需要涉及到的&＃xff1a;

promise的polyfill&＃xff0c;例如es6-promise、babel-polyfill提供的promise实现。

fetch的polyfill实现&＃xff0c;例如isomorphic-fetch和whatwg-fetch

这样是否就可以安全的使用fetch来进行前后端通信了&＃xff1f;上面说了在大多数情况下是这样&＃xff0c;但是IE8/9则比较特殊&＃xff1a;IE8它使用的是ES3&＃xff0c;而IE9则对ES5部分支持。这种情况下还需要ES5的polyfill es5-shim支持了。

上述有关promise的polyfill实现&＃xff0c;需要说明的是&＃xff1a;

babel-runtime是不能作为Promise的polyfill的实现的&＃xff0c;否则在IE8/9下使用fetch会报Promise未定义。为什么&＃xff1f;我想大家猜到了&＃xff0c;因为babel-runtime实现的polyfill是局部实现而不是全局实现&＃xff0c;fetch底层实现用到Promise就是从全局中去取的&＃xff0c;拿不到这报上述错误。

另外&＃xff0c;顺便补充一下fetch的polyfill实现思路是&＃xff1a;

首先判断浏览器是否原生支持fetch&＃xff0c;否则结合Promise使用XMLHttpRequest的方式来实现&＃xff1b;这正是whatwg-fetch的实现思路&＃xff0c;而同构应用中使用的isomorphic-fetch&＃xff0c;其客户端fetch的实现是直接require whatwg-fetch来实现的。

fetch默认不携带COOKIE

fetch发送请求默认是不发送COOKIE的&＃xff0c;不管是同域还是跨域&＃xff1b;那么问题就来了&＃xff0c;对于那些需要权限验证的请求就可能无法正常获取数据&＃xff0c;这时可以配置其credentials项&＃xff0c;其有3个值&＃xff1a;

omit: 默认值&＃xff0c;忽略COOKIE的发送

same-origin: 表示COOKIE只能同域发送&＃xff0c;不能跨域发送

include: COOKIE既可以同域发送&＃xff0c;也可以跨域发送

credentials所表达的含义&＃xff0c;其实与XHR2中的withCredentials属性类似&＃xff0c;表示请求是否携带COOKIE&＃xff1b;具体可以参考阮一峰老师的跨域资源共享 CORS 详解中withCredentials一节的介绍&＃xff1b;

这样&＃xff0c;若要fetch请求携带COOKIE信息&＃xff0c;只需设置一下credentials选项即可&＃xff0c;例如fetch(url, {credentials: &＃39;include&＃39;});

另外补充一点&＃xff1a;

fetch默认对服务端通过Set-COOKIE头设置的COOKIE也会忽略&＃xff0c;若想选择接受来自服务端的COOKIE信息&＃xff0c;也必须要配置credentials选项&＃xff1b;

fetch请求对某些错误http状态不会reject

这主要是由fetch返回promise导致的&＃xff0c;因为fetch返回的promise在某些错误的http状态下如400、500等不会reject&＃xff0c;相反它会被resolve&＃xff1b;只有网络错误会导致请求不能完成时&＃xff0c;fetch 才会被 reject&＃xff1b;所以一般会对fetch请求做一层封装&＃xff0c;例如下面代码所示&＃xff1a;

function checkStatus(response) {

if (response.status >&＃61; 200 && response.status <300) {

return response;

}

const error &＃61; new Error(response.statusText);

error.response &＃61; response;

throw error;

}

function parseJSON(response) {

return response.json();

}

export default function request(url, options) {

let opt &＃61; options || {};

return fetch(url, { credentials: "include", ...opt })

.then(checkStatus)

.then(parseJSON)

.then(data &＃61;> data)

.catch(err &＃61;> err);

}

fetch不支持超时timeout处理

用过fetch的都知道&＃xff0c;fetch不像大多数ajax库那样对请求设置超时timeout&＃xff0c;它没有有关请求超时的feature&＃xff0c;这一点比较蛋疼。所以在fetch标准添加超时feature之前&＃xff0c;都需要polyfill该特性。

实际上&＃xff0c;我们真正需要的是abort()&＃xff0c; timeout可以通过timeout&＃43;abort方式来实现&＃xff0c;起到真正超时丢弃当前的请求。

而在目前的fetch指导规范中&＃xff0c;fetch并不是一个具体实例&＃xff0c;而只是一个方法&＃xff1b;其返回的promise实例根据Promise指导规范标准是不能abort的&＃xff0c;也不能手动改变promise实例的状态&＃xff0c;只能由内部来根据请求结果来改变promise的状态。

既然不能手动控制fetch方法执行后返回的promise实例状态&＃xff0c;那么是不是可以创建一个可以手动控制状态的新Promise实例呢。所以&＃xff1a;

实现fetch的timeout功能&＃xff0c;其思想就是新创建一个可以手动控制promise状态的实例&＃xff0c;根据不同情况来对新promise实例进行resolve或者reject&＃xff0c;从而达到实现timeout的功能&＃xff1b;

根据github上timeout handling上的讨论&＃xff0c;目前可以有两种不同的解决方法&＃xff1a;

方法一&＃xff1a;单纯setTimeout方式

var oldFetchfn &＃61; fetch; //拦截原始的fetch方法

window.fetch &＃61; function(input, opts) {

//定义新的fetch方法&＃xff0c;封装原有的fetch方法

return new Promise(function(resolve, reject) {

var timeoutId &＃61; setTimeout(function() {

reject(new Error("fetch timeout"));

}, opts.timeout);

oldFetchfn(input, opts).then(

res &＃61;> {

clearTimeout(timeoutId);

resolve(res);

},

err &＃61;> {

clearTimeout(timeoutId);

reject(err);

}

);

});

};

当然在上面基础上可以模拟类似XHR的abort功能&＃xff1a;

var oldFetchfn &＃61; fetch;

window.fetch &＃61; function(input, opts) {

return new Promise(function(resolve, reject) {

var abort_promise &＃61; function() {

reject(new Error("fetch abort"));

};

var p &＃61; oldFetchfn(input, opts).then(resolve, reject);

p.abort &＃61; abort_promise;

return p;

});

};

方法二&＃xff1a;利用Promise.race方法

Promise.race方法接受一个promise实例数组参数&＃xff0c;表示多个promise实例中任何一个最先改变状态&＃xff0c;那么race方法返回的promise实例状态就跟着改变&＃xff0c;具体可以参考这里。

var oldFetchfn &＃61; fetch; //拦截原始的fetch方法

window.fetch &＃61; function(input, opts){//定义新的fetch方法&＃xff0c;封装原有的fetch方法

var fetchPromise &＃61; oldFetchfn(input, opts);

var timeoutPromise &＃61; new Promise(function(resolve, reject){

setTimeout(()&＃61;>{

reject(new Error("fetch timeout"))

}, opts.timeout)

});

retrun Promise.race([fetchPromise, timeoutPromise])

}

最后&＃xff0c;对fetch的timeout的上述实现方式补充几点&＃xff1a;

timeout不是请求连接超时的含义&＃xff0c;它表示请求的response时间&＃xff0c;包括请求的连接、服务器处理及服务器响应回来的时间&＃xff1b;

fetch的timeout即使超时发生了&＃xff0c;本次请求也不会被abort丢弃掉&＃xff0c;它在后台仍然会发送到服务器端&＃xff0c;只是本次请求的响应内容被丢弃而已&＃xff1b;

fetch不支持JSONP

fetch是与服务器端进行异步交互的&＃xff0c;而JSONP是外链一个Javascript资源&＃xff0c;并不是真正ajax&＃xff0c;所以fetch与JSONP没有什么直接关联&＃xff0c;当然至少目前是不支持JSONP的。

这里我们把JSONP与fetch关联在一起有点差强人意&＃xff0c;fetch只是一个ajax库&＃xff0c;我们不可能使fetch支持JSONP&＃xff1b;只是我们要实现一个JSONP&＃xff0c;只不过这个JSONP的实现要与fetch的实现类似&＃xff0c;即基于Promise来实现一个JSONP&＃xff1b;而其外在表现给人感觉是fetch支持JSONP一样&＃xff1b;

目前比较成熟的开源JSONP实现fetch-jsonp给我们提供了解决方案&＃xff0c;想了解可以自行前往。不过再次想唠叨一下其JSONP的实现步骤&＃xff0c;因为在本人面试的前端候选人中大部分人对JSONP的实现语焉不详&＃xff1b;

使用它非常简单&＃xff0c;首先需要用npm安装fetch-jsonp

npm install fetch-jsonp --save-dev

然后在像下面一样使用&＃xff1a;

fetchJsonp("/users.jsonp", {

timeout: 3000,

jsonpCallback: "custom_callback"

})

.then(function(response) {

return response.json();

})

.catch(function(ex) {

console.log("parsing failed", ex);

});

fetch不支持progress事件

XHR是原生支持progress事件的&＃xff0c;例如下面代码这样&＃xff1a;

var xhr &＃61; new XMLHttpRequest();

xhr.open("POST", "/uploads");

xhr.onload &＃61; function() {};

xhr.onerror &＃61; function() {};

function updateProgress(event) {

if (event.lengthComputable) {

var percent &＃61; Math.round((event.loaded / event.total) * 100);

console.log(percent);

}

xhr.upload.onprogress &＃61; updateProgress; //上传的progress事件

xhr.onprogress &＃61; updateProgress; //下载的progress事件

}

xhr.send();

但是fetch是不支持有关progress事件的&＃xff1b;不过可喜的是&＃xff0c;根据fetch的指导规范标准&＃xff0c;其内部设计实现了Request和Response类&＃xff1b;其中Response封装一些方法和属性&＃xff0c;通过Response实例可以访问这些方法和属性&＃xff0c;例如response.json()、response.body等等&＃xff1b;

值得关注的地方是&＃xff0c;response.body是一个可读字节流对象&＃xff0c;其实现了一个getRender()方法&＃xff0c;其具体作用是&＃xff1a;

getRender()方法用于读取响应的原始字节流&＃xff0c;该字节流是可以循环读取的&＃xff0c;直至body内容传输完成&＃xff1b;

因此&＃xff0c;利用到这点可以模拟出fetch的progress&＃xff0c;具体可以参考这篇文章2016 - the year of web streams。

// fetch() returns a promise that resolves once headers have been received

fetch(url).then(response &＃61;> {

// response.body is a readable stream.

// Calling getReader() gives us exclusive access to the stream&＃39;s content

var reader &＃61; response.body.getReader();

var bytesReceived &＃61; 0;

// read() returns a promise that resolves when a value has been received

reader.read().then(function processResult(result) {

// Result objects contain two properties:

// done - true if the stream has already given you all its data.

// value - some data. Always undefined when done is true.

if (result.done) {

console.log("Fetch complete");

return;

}

// result.value for fetch streams is a Uint8Array

bytesReceived &＃43;&＃61; result.value.length;

console.log("Received", bytesReceived, "bytes of data so far");

// Read some more, and call this function again

return reader.read().then(processResult);

});

});

另外&＃xff0c;github上也有使用Promise&＃43;XHR结合的方式实现类fetch的progress效果(当然这跟fetch完全不搭边)可以参考这里&＃xff0c;具体代码如下&＃xff1a;

function fetchProgress(url, opts&＃61;{}, onProgress){

return new Promise(funciton(resolve, reject){

var xhr &＃61; new XMLHttpRequest();

xhr.open(opts.method || &＃39;get&＃39;, url);

for(var key in opts.headers || {}){

xhr.setRequestHeader(key, opts.headers[key]);

}

xhr.onload &＃61; e &＃61;> resolve(e.target.responseText)

xhr.onerror &＃61; reject;

if (xhr.upload && onProgress){

xhr.upload.onprogress &＃61; onProgress; //上传

}

if (&＃39;onprogerss&＃39; in xhr && onProgress){

xhr.onprogress &＃61; onProgress; //下载

}

xhr.send(opts.body)

})

}

fetchProgress(&＃39;/upload&＃39;).then(console.log)

fetch跨域问题

既然是ajax库&＃xff0c;就不可避免与跨域扯上关系&＃xff1b;XHR2是支持跨域请求的&＃xff0c;只不过要满足浏览器端支持CORS&＃xff0c;服务器通过Access-Control-Allow-Origin来允许指定的源进行跨域&＃xff0c;仅此一种方式。

与XHR2一样&＃xff0c;fetch也是支持跨域请求的&＃xff0c;只不过其跨域请求做法与XHR2一样&＃xff0c;需要客户端与服务端支持&＃xff1b;另外&＃xff0c;fetch还支持一种跨域&＃xff0c;不需要服务器支持的形式&＃xff0c;具体可以通过其mode的配置项来说明。

fetch的mode配置项有3个值&＃xff0c;如下&＃xff1a;

same-origin&＃xff1a;该模式是不允许跨域的&＃xff0c;它需要遵守同源策略&＃xff0c;否则浏览器会返回一个error告知不能跨域&＃xff1b;其对应的response type为basic。

cors: 该模式支持跨域请求&＃xff0c;顾名思义它是以CORS的形式跨域&＃xff1b;当然该模式也可以同域请求不需要后端额外的CORS支持&＃xff1b;其对应的response type为cors。

no-cors: 该模式用于跨域请求但是服务器不带CORS响应头&＃xff0c;也就是服务端不支持CORS&＃xff1b;这也是fetch的特殊跨域请求方式&＃xff1b;其对应的response type为opaque。

针对跨域请求&＃xff0c;cors模式是常见跨域请求实现&＃xff0c;但是fetch自带的no-cors跨域请求模式则较为陌生&＃xff0c;该模式有一个比较明显的特点&＃xff1a;

该模式允许浏览器发送本次跨域请求&＃xff0c;但是不能访问响应返回的内容&＃xff0c;这也是其response type为opaque透明的原因。

这与发送的请求类似&＃xff0c;只是该模式不能访问响应的内容信息&＃xff1b;但是它可以被其他APIs进行处理&＃xff0c;例如ServiceWorker。另外&＃xff0c;该模式返回的repsonse可以在Cache API中被存储起来以便后续的对它的使用&＃xff0c;这点对script、css和图片的CDN资源是非常合适的&＃xff0c;因为这些资源响应头中都没有CORS头。

总的来说&＃xff0c;fetch的跨域请求是使用CORS方式&＃xff0c;需要浏览器和服务端的支持。

参考文献