全面分析前端的網路請求方式

Body函數中還為Response對象掛載了四個函數，text、json、blob、formData，這些函數中的操作就是將_initBody中得到的不同類型的返回值返回。

這也說明了，在fetch執行完畢後，不能直接在response中獲取到返回值而必須調用text()、json()等函數才能獲取到返回值。

這裡還有一點需要說明：幾個函數中都有類似下面的邏輯：

var rejected = consumed(this)
if (rejected) {
return rejected
}


consumed函數：

function consumed(body) {
if (body.bodyUsed) {
return Promise.reject(new TypeError(Already read))
}
body.bodyUsed = true
}


每次調用text()、json()等函數後會將bodyUsed變數變為true，用來標識返回值已經讀取過了，下一次再讀取直接拋出TypeError(Already read)。這也遵循了原生fetch的原則：

因為Responses對象被設置為了 stream 的方式，所以它們只能被讀取一次

十、fetch的坑點

VUE的文檔中對fetch有下面的描述：

使用fetch還有很多別的注意事項，這也是為什麼大家現階段還是更喜歡axios 多一些。當然這個事情在未來可能會發生改變。

由於fetch是一個非常底層的API，它並沒有被進行很多封裝，還有許多問題需要處理：

• 不能直接傳遞JavaScript對象作為參數
• 需要自己判斷返回值類型，並執行響應獲取返回值的方法
• 獲取返回值方法只能調用一次，不能多次調用
• 無法正常的捕獲異常
• 老版瀏覽器不會默認攜帶cookie
• 不支持jsonp

十一、對fetch的封裝

請求參數處理

支持傳入不同的參數類型：

function stringify(url, data) {
var dataString = url.indexOf(?) == -1 ? ? : &;
for (var key in data) {
dataString += key + = + data[key] + &;
};
return dataString;
}

if (request.formData) {
request.body = request.data;
} else if (/^get$/i.test(request.method)) {
request.url = `${request.url}${stringify(request.url, request.data)}`;
} else if (request.form) {
request.headers.set(Content-Type, application/x-www-form-urlencoded;charset=UTF-8);
request.body = stringify(request.data);
} else {
request.headers.set(Content-Type, application/json;charset=UTF-8);
request.body = JSON.stringify(request.data);
}


cookie攜帶

fetch在新版瀏覽器已經開始默認攜帶同源cookie，但在老版瀏覽器中不會默認攜帶，我們需要對他進行統一設置：

request.credentials = same-origin; // 同源攜帶
request.credentials = include; // 可跨域攜帶


異常處理

當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch()返回的 Promise 不會被標記為 reject， 即使該 HTTP 響應的狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的 ok 屬性設置為 false ），僅當網路故障時或請求被阻止時，才會標記為 reject。

因此我們要對fetch的異常進行統一處理

.then(response => {
if (response.ok) {
return Promise.resolve(response);
}else{
const error = new Error(`請求失敗! 狀態碼: ${response.status}, 失敗信息: ${response.statusText}`);
error.response = response;
return Promise.reject(error);
}
});


返回值處理

對不同的返回值類型調用不同的函數接收，這裡必須提前判斷好類型，不能多次調用獲取返回值的方法：

.then(response => {
let contentType = response.headers.get(content-type);
if (contentType.includes(application/json)) {
return response.json();
} else {
return response.text();
}
});


jsonp

fetch本身沒有提供對jsonp的支持，jsonp本身也不屬於一種非常好的解決跨域的方式，推薦使用cors或者nginx解決跨域，具體請看下面的章節。

fetch封裝好了，可以愉快的使用了。

嗯，axios真好用...

十二、跨域總結

談到網路請求，就不得不提跨域。

瀏覽器的同源策略限制了從同一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。通常不允許不同源間的讀操作。

跨域條件：協議，域名，埠，有一個不同就算跨域。

下面是解決跨域的幾種方式：

nginx

使用nginx反向代理實現跨域，參考我這篇文章：前端開發者必備的nginx知識

cors

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求。

服務端設置Access-Control-Allow-Origin就可以開啟CORS。 該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源。

app.all(*, function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
next();
});


jsonp

script標籤的src屬性中的鏈接可以訪問跨域的js腳本，利用這個特性，服務端不再返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。

jquery對jsonp的支持：

$.ajax({
type : "get",
url : "http://xxxx"
dataType: "jsonp",
jsonp:"callback",
jsonpCallback: "doo",
success : function(data) {
console.log(data);
}
});


fetch、axios等並沒有直接提供對jsonp的支持，如果需要使用這種方式，我們可以嘗試進行手動封裝：

(function (window,document) {
"use strict";
var jsonp = function (url,data,callback) {

})(window,document)


postMessage跨域

postMessage()方法允許來自不同源的腳本採用非同步方式進行有限的通信，可以實現跨文本檔、多窗口、跨域消息傳遞。

//捕獲iframe
var domain = http://scriptandstyle.com;
var iframe = document.getElementById(myIFrame).contentWindow;

//發送消息
setInterval(function(){
var message = Hello! The time is: + (new Date().getTime());
console.log(blog.local: sending message: + message);
//send the message and target URI
iframe.postMessage(message,domain);
},6000);
//響應事件
window.addEventListener(message,function(event) {
if(event.origin !== http://davidwalsh.name) return;
console.log(message received: + event.data,event);
event.source.postMessage(holla back youngin!,event.origin);
},false);


postMessage跨域適用於以下場景：同瀏覽器多窗口間跨域通信、iframe間跨域通信。

WebSocket

WebSocket 是一種雙向通信協議，在建立連接之後，WebSocket的 server與 client都能主動向對方發送或接收數據而不受同源策略的限制。

function WebSocketTest(){
if ("WebSocket" in window){
alert("您的瀏覽器支持 WebSocket!");
// 打開一個 web socket
var ws = new WebSocket("ws://localhost:3000/abcd");
ws.onopen = function(){
// Web Socket 已連接上，使用 send() 方法發送數據
ws.send("發送數據");
alert("數據發送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("數據已接收...");
};
ws.onclose = function(){
// 關閉 websocket
alert("連接已關閉...");
};
} else{
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}


文章首發

想閱讀更多優質文章，或者需要文章中思維導圖源文件可關注我的github博客，歡迎star?。

文中如有錯誤，歡迎在評論區指正，謝謝閱讀。

推薦閱讀：