fetch使用的常見問題及解決辦法

文章是從#fetch使用的常見問題及解決辦法復(fù)制過來的,

首先聲明一下,本文不是要講解fetch的具體用法,不清楚的可以參考MDN fetch教程

引言

說道fetch就不得不提XMLHttpRequest了,XHR在發(fā)送web請求時需要開發(fā)者配置相關(guān)請求信息和成功后的回調(diào),盡管開發(fā)者只關(guān)心請求成功后的業(yè)務(wù)處理,但是也要配置其他繁瑣內(nèi)容,導(dǎo)致配置和調(diào)用比較混亂,也不符合關(guān)注分離的原則;fetch的出現(xiàn)正是為了解決XHR存在的這些問題。例如下面代碼:

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

上面這段代碼讓開發(fā)者只關(guān)注請求成功后的業(yè)務(wù)邏輯處理,其他的不用關(guān)心,相當(dāng)簡單;也比較符合現(xiàn)代Promise形式,比較友好。

fetch是基于Promise設(shè)計的,從上面代碼也能看得出來,這就要求fetch要配合Promise一起使用。正是這種設(shè)計,fetch所帶來的優(yōu)點正如傳統(tǒng) Ajax 已死,F(xiàn)etch 永生總結(jié)的一樣:

  • 語法簡單,更加語義化

  • 基于標(biāo)準(zhǔn)的Promise實現(xiàn),支持async/await

  • 使用isomorphic-fetch可以方便同構(gòu)

不過話說回來,fetch雖然有很多優(yōu)點,但是使用fetch來進(jìn)行項目開發(fā)時,也是有一些常見問題的,下面就來說說fetch使用的常見問題。

fetch兼容性

fetch是相對較新的技術(shù),當(dāng)然就會存在瀏覽器兼容性的問題,借用上面應(yīng)用文章的一幅圖加以說明fetch在各種瀏覽器的原生支持情況:


image

從上圖可以看出,在各個瀏覽器低版本的情況下都是不被支持的。

那么問題來了,如何在所有瀏覽器中通用fetch呢,當(dāng)然就要考慮fetch的polyfill了。

上面說過,fetch是基于Promise來實現(xiàn)的,所以在低版本瀏覽器中Promise可能也未被原生支持,所以還需要Promise的polyfill;大多數(shù)情況下,實現(xiàn)fetch的polyfill需要涉及到的:

  • promise的polyfill,例如es6-promise、babel-polyfill提供的promise實現(xiàn)。
  • fetch的polyfill實現(xiàn),例如isomorphic-fetch和whatwg-fetch

這樣是否就可以安全的使用fetch來進(jìn)行前后端通信了?上面說了在大多數(shù)情況下是這樣,但是IE8/9則比較特殊:IE8它使用的是ES3,而IE9則對ES5部分支持。這種情況下還需要ES5的polyfill es5-shim支持了。

上述有關(guān)promise的polyfill實現(xiàn),需要說明的是:

babel-runtime是不能作為Promise的polyfill的實現(xiàn)的,否則在IE8/9下使用fetch會報Promise未定義。為什么?我想大家猜到了,因為babel-runtime實現(xiàn)的polyfill是局部實現(xiàn)而不是全局實現(xiàn),fetch底層實現(xiàn)用到Promise就是從全局中去取的,拿不到這報上述錯誤。

另外,順便補(bǔ)充一下fetch的polyfill實現(xiàn)思路是:

首先判斷瀏覽器是否原生支持fetch,否則結(jié)合Promise使用XMLHttpRequest的方式來實現(xiàn);這正是whatwg-fetch的實現(xiàn)思路,而同構(gòu)應(yīng)用中使用的isomorphic-fetch,其客戶端fetch的實現(xiàn)是直接require whatwg-fetch來實現(xiàn)的。

fetch默認(rèn)不攜帶cookie

fetch發(fā)送請求默認(rèn)是不發(fā)送cookie的,不管是同域還是跨域;那么問題就來了,對于那些需要權(quán)限驗證的請求就可能無法正常獲取數(shù)據(jù),這時可以配置其credentials項,其有3個值:

  • omit: 默認(rèn)值,忽略cookie的發(fā)送
  • same-origin: 表示cookie只能同域發(fā)送,不能跨域發(fā)送
  • include: cookie既可以同域發(fā)送,也可以跨域發(fā)送

credentials所表達(dá)的含義,其實與XHR2中的withCredentials屬性類似,表示請求是否攜帶cookie;具體可以參考阮一峰老師的跨域資源共享 CORS 詳解中withCredentials一節(jié)的介紹;

這樣,若要fetch請求攜帶cookie信息,只需設(shè)置一下credentials選項即可,例如fetch(url, {credentials: 'include'});

另外補(bǔ)充一點:

fetch默認(rèn)對服務(wù)端通過Set-Cookie頭設(shè)置的cookie也會忽略,若想選擇接受來自服務(wù)端的cookie信息,也必須要配置credentials選項;

fetch請求對某些錯誤http狀態(tài)不會reject

這主要是由fetch返回promise導(dǎo)致的,因為fetch返回的promise在某些錯誤的http狀態(tài)下如400、500等不會reject,相反它會被resolve;只有網(wǎng)絡(luò)錯誤會導(dǎo)致請求不能完成時,fetch 才會被 reject;所以一般會對fetch請求做一層封裝,例如下面代碼所示:

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }
  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}
function parseJSON(response) {
  return response.json();
}
export default function request(url, options) {
  let opt = options||{};
  return fetch(url, {credentials: 'include', ...opt})
    .then(checkStatus)
    .then(parseJSON)
    .then((data) => ( data ))
    .catch((err) => ( err ));
}

fetch不支持超時timeout處理

用過fetch的都知道,fetch不像大多數(shù)ajax庫那樣對請求設(shè)置超時timeout,它沒有有關(guān)請求超時的feature,這一點比較蛋疼。所以在fetch標(biāo)準(zhǔn)添加超時feature之前,都需要polyfill該特性。

實際上,我們真正需要的是abort(), timeout可以通過timeout+abort方式來實現(xiàn),起到真正超時丟棄當(dāng)前的請求。

而在目前的fetch指導(dǎo)規(guī)范中,fetch并不是一個具體實例,而只是一個方法;其返回的promise實例根據(jù)Promise指導(dǎo)規(guī)范標(biāo)準(zhǔn)是不能abort的,也不能手動改變promise實例的狀態(tài),只能由內(nèi)部來根據(jù)請求結(jié)果來改變promise的狀態(tài)。

既然不能手動控制fetch方法執(zhí)行后返回的promise實例狀態(tài),那么是不是可以創(chuàng)建一個可以手動控制狀態(tài)的新Promise實例呢。所以:

實現(xiàn)fetch的timeout功能,其思想就是新創(chuàng)建一個可以手動控制promise狀態(tài)的實例,根據(jù)不同情況來對新promise實例進(jìn)行resolve或者reject,從而達(dá)到實現(xiàn)timeout的功能;

根據(jù)github上timeout handling上的討論,目前可以有兩種不同的解決方法:

方法一:單純setTimeout方式

var oldFetchfn = fetch; //攔截原始的fetch方法
window.fetch = function(input, opts){//定義新的fetch方法,封裝原有的fetch方法
    return new Promise(function(resolve, reject){
        var timeoutId = setTimeout(function(){
            reject(new Error("fetch timeout"))
        }, opts.timeout);
        oldFetchfn(input, opts).then(
            res=>{
                clearTimeout(timeoutId);
                resolve(res)
            },
            err=>{
                clearTimeout(timeoutId);
                reject(err)
            }
        )
    })
}

當(dāng)然在上面基礎(chǔ)上可以模擬類似XHR的abort功能:

var oldFetchfn = fetch; 
window.fetch = function(input, opts){
    return new Promise(function(resolve, reject){
        var abort_promise = function(){
            reject(new Error("fetch abort"))
        };
        var p = oldFetchfn(input, opts).then(resolve, reject);
        p.abort = abort_promise;
        return p;
    })
}

方法二:利用Promise.race方法

Promise.race方法接受一個promise實例數(shù)組參數(shù),表示多個promise實例中任何一個最先改變狀態(tài),那么race方法返回的promise實例狀態(tài)就跟著改變,具體可以參考這里

var oldFetchfn = fetch; //攔截原始的fetch方法
window.fetch = function(input, opts){//定義新的fetch方法,封裝原有的fetch方法
    var fetchPromise = oldFetchfn(input, opts);
    var timeoutPromise = new Promise(function(resolve, reject){
        setTimeout(()=>{
             reject(new Error("fetch timeout"))
        }, opts.timeout)
    });
    retrun Promise.race([fetchPromise, timeoutPromise])
}

最后,對fetch的timeout的上述實現(xiàn)方式補(bǔ)充幾點:

timeout不是請求連接超時的含義,它表示請求的response時間,包括請求的連接、服務(wù)器處理及服務(wù)器響應(yīng)回來的時間;

fetch的timeout即使超時發(fā)生了,本次請求也不會被abort丟棄掉,它在后臺仍然會發(fā)送到服務(wù)器端,只是本次請求的響應(yīng)內(nèi)容被丟棄而已;

fetch不支持JSONP

fetch是與服務(wù)器端進(jìn)行異步交互的,而JSONP是外鏈一個javascript資源,并不是真正ajax,所以fetch與JSONP沒有什么直接關(guān)聯(lián),當(dāng)然至少目前是不支持JSONP的。

這里我們把JSONP與fetch關(guān)聯(lián)在一起有點差強(qiáng)人意,fetch只是一個ajax庫,我們不可能使fetch支持JSONP;只是我們要實現(xiàn)一個JSONP,只不過這個JSONP的實現(xiàn)要與fetch的實現(xiàn)類似,即基于Promise來實現(xiàn)一個JSONP;而其外在表現(xiàn)給人感覺是fetch支持JSONP一樣;

目前比較成熟的開源JSONP實現(xiàn)fetch-jsonp給我們提供了解決方案,想了解可以自行前往。不過再次想嘮叨一下其JSONP的實現(xiàn)步驟,因為在本人面試的前端候選人中大部分人對JSONP的實現(xiàn)語焉不詳;

使用它非常簡單,首先需要用npm安裝fetch-jsonp

 npm install fetch-jsonp --save-dev

然后在像下面一樣使用:

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事件的,例如下面代碼這樣:

var xhr = new XMLHttpRequest()
xhr.open('POST', '/uploads')
xhr.onload = function() {}
xhr.onerror = function() {}
function updateProgress (event) {
  if (event.lengthComputable) {
    var percent = Math.round((event.loaded / event.total) * 100)
    console.log(percent)
  }
xhr.upload.onprogress =updateProgress; //上傳的progress事件
xhr.onprogress = updateProgress; //下載的progress事件
}
xhr.send();

但是fetch是不支持有關(guān)progress事件的;不過可喜的是,根據(jù)fetch的指導(dǎo)規(guī)范標(biāo)準(zhǔn),其內(nèi)部設(shè)計實現(xiàn)了RequestResponse類;其中Response封裝一些方法和屬性,通過Response實例可以訪問這些方法和屬性,例如response.json()response.body等等;

值得關(guān)注的地方是,response.body是一個可讀字節(jié)流對象,其實現(xiàn)了一個getRender()方法,其具體作用是:

getRender()方法用于讀取響應(yīng)的原始字節(jié)流,該字節(jié)流是可以循環(huán)讀取的,直至body內(nèi)容傳輸完成;

因此,利用到這點可以模擬出fetch的progress,具體可以參考這篇文章2016 - the year of web streams

代碼實現(xiàn)如下,在線demo請參考fetch progress demo

// fetch() returns a promise that resolves once headers have been received
fetch(url).then(response => {
  // response.body is a readable stream.
  // Calling getReader() gives us exclusive access to the stream's content
  var reader = response.body.getReader();
  var bytesReceived = 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 += 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);
  });
});

另外,github上也有使用Promise+XHR結(jié)合的方式實現(xiàn)類fetch的progress效果(當(dāng)然這跟fetch完全不搭邊)可以參考這里,具體代碼如下:

function fetchProgress(url, opts={}, onProgress){
    return new Promise(funciton(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.open(opts.method || 'get', url);
        for(var key in opts.headers || {}){
            xhr.setRequestHeader(key, opts.headers[key]);
        }

        xhr.onload = e => resolve(e.target.responseText)
        xhr.onerror = reject;
        if (xhr.upload && onProgress){
            xhr.upload.onprogress = onProgress; //上傳
        }
        if ('onprogerss' in xhr && onProgress){
            xhr.onprogress = onProgress; //下載
        }
        xhr.send(opts.body)
    })
}
fetchProgress('/upload').then(console.log)

fetch跨域問題

既然是ajax庫,就不可避免與跨域扯上關(guān)系;XHR2是支持跨域請求的,只不過要滿足瀏覽器端支持CORS,服務(wù)器通過Access-Control-Allow-Origin來允許指定的源進(jìn)行跨域,僅此一種方式。

與XHR2一樣,fetch也是支持跨域請求的,只不過其跨域請求做法與XHR2一樣,需要客戶端與服務(wù)端支持;另外,fetch還支持一種跨域,不需要服務(wù)器支持的形式,具體可以通過其mode的配置項來說明。

fetch的mode配置項有3個值,如下:

  • same-origin:該模式是不允許跨域的,它需要遵守同源策略,否則瀏覽器會返回一個error告知不能跨域;其對應(yīng)的response type為basic

  • cors: 該模式支持跨域請求,顧名思義它是以CORS的形式跨域;當(dāng)然該模式也可以同域請求不需要后端額外的CORS支持;其對應(yīng)的response type為cors

  • no-cors: 該模式用于跨域請求但是服務(wù)器不帶CORS響應(yīng)頭,也就是服務(wù)端不支持CORS;這也是fetch的特殊跨域請求方式;其對應(yīng)的response type為opaque

針對跨域請求,cors模式是常見跨域請求實現(xiàn),但是fetch自帶的no-cors跨域請求模式則較為陌生,該模式有一個比較明顯的特點:

該模式允許瀏覽器發(fā)送本次跨域請求,但是不能訪問響應(yīng)返回的內(nèi)容,這也是其response type為opaque透明的原因。

這與<img/>發(fā)送的請求類似,只是該模式不能訪問響應(yīng)的內(nèi)容信息;但是它可以被其他APIs進(jìn)行處理,例如ServiceWorker。另外,該模式返回的repsonse可以在Cache API中被存儲起來以便后續(xù)的對它的使用,這點對script、css和圖片的CDN資源是非常合適的,因為這些資源響應(yīng)頭中都沒有CORS頭。

總的來說,fetch的跨域請求是使用CORS方式,需要瀏覽器和服務(wù)端的支持。

參考文獻(xiàn)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容