vue專案中使用fetch開發
fetch的由來和定義
fetch的由來
眾所周知,傳統 Ajax (指 XMLHttpRequest)是最早出現的傳送非同步請求技術,其核心是使用XMLHttpRequest物件。但是它也存在一些令人頭疼的問題:XHR 是一個設計粗糙的 API,不符合關注分離的原則;配置和呼叫方式非常混亂,而且基於事件的非同步模型寫起來也沒有現代的 Promise,generator/yield,async/await 友好。而Fetch 的出現就是為了解決 XHR 存在的問題。
fetch的定義和使用
MDN中的描述:
Fetch API 提供了一個獲取資源的介面(包括跨域請求)。任何使用過
XMLHttpRequest
的人都能輕鬆上手,但新的API提供了更強大和靈活的功能集。but 因為悽慘的相容性,讓這個東東用起來比較困難。那我可以自己封裝一下,對於不支援fetch的瀏覽器便使用ajax 代替(見下文)。
Fetch 的核心在於對 HTTP 介面的抽象,包括
Request
,
Response
,
Headers
,
Body
,以及用於初始化非同步請求的
global fetch
。其中,global fetch方法的語法定義:
fetch(input[, init]); input:定義要獲取的資源。可以是一個資源的 URL 字串,也可以是一個 Request 物件。 init:可選,一個配置項物件,包括所有對請求的設定。包括:method,headers,body,mode,credentials等返回值:Promise 複製程式碼
切記一點:Fetch是基於promise設計的,它不是ajax的進一步封裝,而是原生js API,沒有使用XMLHttpRequest物件。
fetch的優點和缺點
優點:
1. 語法簡潔,更加語義化 2. 基於標準 Promise 實現,支援 async/await 3. 同構方便,更加底層,提供的API豐富(request, response, body , headers)5. 脫離了XHR,是ES規範裡新的實現方式複製程式碼
缺點:
1. fetch只對網路請求報錯,對400,500都當做成功的請求,伺服器返回 400,500 錯誤碼時並不會 reject。 2. fetch預設不會帶cookie,需要新增配置項: credentials: 'include'。 3. fetch不支援abort,不支援超時控制,造成了流量的浪費。 4. fetch沒有辦法原生監測請求的進度,而XHR可以複製程式碼
補充知識點:
Fetch的mode配置項有3個取值:
same-origin:該模式是不允許跨域的,它需要遵守同源策略;
cors: 該模式支援跨域請求,顧名思義它是以CORS的形式跨域;
no-cors: 該模式用於跨域請求但是伺服器不帶CORS響應頭,也就是服務端不支援CORS;
目前,針對跨域請求,cors模式是常見的實現。
vue專案中完美封裝fetch
話不多少,直接附上程式碼。
env.js檔案,如下:
/** * baseUrl: 域名地址 * routerMode: 路由模式 */ let baseUrl = ''; let routerMode = 'history'; if (process.env.NODE_ENV == 'development') { baseUrl = 'http://localhost:3000'; }else{ baseUrl = 'http://xxxx這裡是線上地址xxx'; } export { baseUrl, routerMode } 複製程式碼
fetch.js檔案,如下:
import { baseUrl } from './env' export default async(url = '', data = {}, type = 'GET', method = 'fetch') => { type = type.toUpperCase(); url = baseUrl + url; // 此處規定get請求的引數使用時放在data中,如同post請求 if (type == 'GET') { let dataStr = ''; Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&'; }) if (dataStr !== '') { dataStr = dataStr.substr(0, dataStr.lastIndexOf('&')); url = url + '?' + dataStr; } } // 對於支援fetch方法的瀏覽器,處理如下: if (window.fetch && method == 'fetch') { let requestConfig = { // fetch預設不會帶cookie,需要新增配置項credentials允許攜帶cookie credentials: 'include', method: type, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, mode: "cors", // 以CORS的形式跨域 cache: "force-cache" } if (type == 'POST') { Object.defineProperty(requestConfig, 'body', { value: JSON.stringify(data) }) } try { const response = await fetch(url, requestConfig); const responseJson = await response.json(); return responseJson } catch (error) { throw new Error(error) } } else { // 對於不支援fetch的瀏覽器,便自動使用 ajax + promise return new Promise((resolve, reject) => { let requestObj; if (window.XMLHttpRequest) { requestObj = new XMLHttpRequest(); } else { requestObj = new ActiveXObject; // 相容IE } let sendData = ''; if (type == 'POST') { sendData = JSON.stringify(data); } requestObj.open(type, url, true); requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); requestObj.send(sendData); requestObj.onreadystatechange = () => { if (requestObj.readyState == 4) { if (requestObj.status == 200) { let obj = requestObj.response if (typeof obj !== 'object') { obj = JSON.parse(obj); } resolve(obj) } else { reject(requestObj) } } } }) } } 複製程式碼
以上程式碼,親測有效。Over, thanks !