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

pkwenda 發(fā)布于2019-08-23 17:52 / 1652人閱讀

摘要：首先聲明一下，本文不是要講解的具體用法，不清楚的可以參考教程。該模式用于跨域請(qǐng)求但是服務(wù)器不帶響應(yīng)頭，也就是服務(wù)端不支持這也是的特殊跨域請(qǐng)求方式其對(duì)應(yīng)的為。

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

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

配置其 credentials 項(xiàng)，其有3個(gè)值：

omit: 默認(rèn)值，忽略cookie的發(fā)送

same-origin: 表示cookie只能同域發(fā)送，不能跨域發(fā)送

include: cookie既可以同域發(fā)送，也可以跨域發(fā)送

credentials所表達(dá)的含義，其實(shí)與XHR2中的withCredentials屬性類似，表示請(qǐng)求是否攜帶cookie

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

fetch請(qǐng)求對(duì)某些錯(cuò)誤http狀態(tài)不會(huì)reject

這主要是由fetch返回promise導(dǎo)致的，因?yàn)閒etch返回的promise在某些錯(cuò)誤的http狀態(tài)下如400、500等不會(huì)reject，相反它會(huì)被resolve；只有網(wǎng)絡(luò)錯(cuò)誤會(huì)導(dǎo)致請(qǐng)求不能完成時(shí)，fetch 才會(huì)被 reject；所以一般會(huì)對(duì)fetch請(qǐng)求做一層封裝，例如下面代碼所示：

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不支持超時(shí)timeout處理

方法一：單純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方法接受一個(gè)promise實(shí)例數(shù)組參數(shù)，表示多個(gè)promise實(shí)例中任何一個(gè)最先改變狀態(tài)，那么race方法返回的promise實(shí)例狀態(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不支持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è)計(jì)實(shí)現(xiàn)了Request和Response類；其中Response封裝一些方法和屬性，通過Response實(shí)例可以訪問這些方法和屬性，例如response.json()、response.body等等；

值得關(guān)注的地方是，response.body是一個(gè)可讀字節(jié)流對(duì)象，其實(shí)現(xiàn)了一個(gè)getRender()方法，其具體作用是：

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

因此，利用到這點(diǎn)可以模擬出fetch的progress

// 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);
  });
});

fetch跨域問題

fetch的mode配置項(xiàng)有3個(gè)值，如下：

same-origin：該模式是不允許跨域的，它需要遵守同源策略，否則瀏覽器會(huì)返回一個(gè)error告知不能跨域；其對(duì)應(yīng)的response type為basic。

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

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

參考

MDN-ReadableStream

MDN fetch

https://segmentfault.com/a/1190000008484070#articleHeader3

友情鏈接

前端知識(shí)體系

react服務(wù)端渲染博客