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 !