defaults(默認配置)和mergeConfig(合並config方法)

axios學習筆記defaults(默認配置)和mergeConfig(合並config方法)

源碼地址

找到入口文件

axios/lib/axios.js

 	...
	var mergeConfig  =  require('./core/mergeConfig');`
	var defaults = require('./defaults')`
	...

學習mergeConfig

axios/lib/core/mergeConfig.js

	var utils = require('../utils')//引入公用方法
	// 合並 config1 和config2,並將一些默認配置項放到config中
	function mergeConfig(config1, config2) {
		config2 = config2 || {};
		var config = {}
		//默認配置參數字段
		//從config2中拿到config里的字段
		var valueFromConfig2Keys = ['url', 'method', 'params', 'data'];
		//合並config1和config2中的這些字段，config2優先
		var mergeDeepPropertiesKeys = ['headers', 'auth', 'proxy'];
		// 從config2中拿到default的字段
		var defaultToConfig2Keys = [
			'baseURL', 'url', 'transformRequest', 'transformResponse', 'paramsSerializer',
		    'timeout', 'withCredentials', 'adapter', 'responseType', 'xsrfCookieName',
		    'xsrfHeaderName', 'onUploadProgress', 'onDownloadProgress',
		    'maxContentLength', 'validateStatus', 'maxRedirects', 'httpAgent',
		    'httpsAgent', 'cancelToken', 'socketPath'
		];
		//將config2中valueFromConfig2Key里存在的項復制config對象里
		utils.forEach(valueFromConfig2Keys, function valueFromConfig2(prop){//prop為valueFromConfig2Keyd中的具體每項的值
			if(typeof config2[prop] !== 'undefined'){
				config[prop] = config2[prop];
			}
		})
		utils.forEach(mergeDeepPropertiesKeys, function mergeDeepProperties(prop){
			if(utils.isObject(config2[prop])){//如果config2[prop]為對象，進行深度合並
				config[prop] = utils.deepMerge(config1[prop], config2[prop]);//此處確保了config1[prop]的存在
			} else if(typeof config2[prop] != 'undefiend') {//config2[prop]存在且不為對象，直接賦值
				config[prop] = config2[prop];
			} else if(utils.isObect(config1[prop])){//config2[prop]不存在但config1[prop]存在且為對象
				config[prop] = utils.deepMerge(config1[prop]);
			} eles {//config2[prop]不存在且config1[prop]不為對象
				config[prop] = config1[prop];
			}
		})
		// 從config2中拿到default的字段,如果沒有去config1中拿字段
		utils.forEach(defaultToConfig2Keys, function defaultToConfig2(prop){
			if(typeof config2[prop] !== 'undefined'){
				config[prop] = config2[prop];
			} else {
				config[prop] = config1[prop]
			}
		})
		//合並所有關鍵字
		var axiosKeys = valueFromConfig2Keys.concat(mergeDeepPropeotiesKeys).cancat(defaultToConfig2Key2);
		//找出存在config2中不同於默認配置項的項，並加到config上去
		var otherKeys = Object.keys(config2).filter(function filterAxiosKeys(key){
			return axiosKeys.indexOf(key) === -1
		});
		utils.forEach(otherKey2, function other(prop){
			if(typeof config2[prop] !== 'undefined' || typeof config1[prop] !== 'undefined'){
				config[prop] = config2[prop] || config1[prop];
			} 
		})
		//返回拼接后的對象
		return config;
	}

default默認配置

<!-- 默認配置依賴normalizeHeaderName -->
var utils = require('./utils');
var normalizeHeaderName = require('./helpers/normalizeHeaderName');
...

normalizeHeaderName方法

先看normalizeHeaderName方法，默認配置中使用到此方法

var utils = require('../utils')
module.export = function normalizeHeaderName(headers, normalizedName) {
	//轉化headers中的鍵值名，如果headers中的鍵值不等於normalizedName,且字母相同，將heders中的鍵值換成normalizedName
	utils.forEach(heders, function processHeader(value, name){
		if(name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()){
			headers[normalizedName] = value;//添加新鍵值對
			delete headers[name]; //刪除原有鍵值對
		}
	})

}

配置默認的Content-Type

請求頭content-type,用來指定不同格式的請求信息
mediaType,互聯網媒體類型，在http協議消息頭中，使用content-type表示具體請求中的媒體類型信息

<!-- 
常見的媒體格式
text/html:html格式
application/json: json格式
application/x-www-form-urlencoded: (表單默認提交數據格式)<form encType="">中默認的encType,form表單中的數據被編碼為key/value格式發送到服務器
multipart/form-data: 需要在表單中進行文件上傳時設置此格式 
-->
var DEFAULT_CONTENT_TYPE = {//默認的Content-Type
	'Content-Type': 'application/x-www-form-urlencoded'
}

setContentTypeIfUnset方法

當沒有配置Content-Type時設置headers中Content-Type的值

function setContentTypeIfUnset(headers, value){//value為需要設置的Content-Type的值
	//當headers存在且heders[Content-Type]不存在
	if(!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])){
		headers['Content-Type'] = value;
	}
}

getDefaultAdapter方法

獲取默認的異步請求適配器，由於axios支持瀏覽器環境和node環境兩套環境，兩套環境需要不同的適配器

function getDefaultAdaptet(){
	var adapter;
	if(typeof XMLHttpRequest !== 'undifined'){//當前環境支持XMLHttpRequest對象為瀏覽器環境
		adapter = require('./adapter/xhr');
	} else if(typeof process !== 'undefined' && Object.property.toString.call(process) === '[object process]'){//當前環境支持process對象為node環境
		adapter = require('./adapter/http');
	}
}

定義默認default對象

var default = {
	adapter: getDefaultAdapter(),//默認異步請求適配器，允許自定義處理請求，方便測試
	//攔截請求數據默認配置，根據數據類型做一定處理,例如設置Content-type
	transformRequest:[function transformRequest(data, headers){
		normalizeHederName(headers, 'Accept');//大小寫處理，防止用戶寫錯
		normalizeHederName(headers, 'Content-Type');
		if(utils.isFormData(data) || utils.isArrayBuffer(data) || utils.isBuffer(data) || utils.isStream(data) || utils.isFile(data) || utils.isBlob(data)){
			return data;
		}
		if(utils.isArrayBufferView(data)){
			return data.buffer;
		}
		//根據數據類型設置相應的Content-Type
		if(utils.isURLSearchParams(data)){
			setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8')
			return data.toString();
		}
		if(utils.isObject(data)){
			setContentTypeIfUnset(headers, 'application/json;chatset=utf-8')
			return JSON.stringify(data);
		}
		return data;
	}],
	//攔截響應數據默認配置，根據數據類型做一定處理
	transformResponse:[function transformResponse(data){
		if(typeof data == 'string'){
			try{
				data = JSON.parse(data);
			}catch(e){

			}
		}
		return data;
	}],,
	timeout: 0, // 請求超時時長
	xsrfCookieName:'XSFR-TOKEN',//表示用作xsrf令牌的值的名稱
	xsrfHeaderName:'X-XSRF-TOKEN',//表示攜帶xsrf令牌的值的http頭的名稱
	maxContentLength: -1,定義允許的http響應內容的最大大小
	validateStatus: function validateStatus(status){//校驗請求返回的狀態碼，狀態碼在200-300以內請求成功
		return status > 200 && status < 300;
	}
}

配置default對象的默認headers

//Accept代表客戶希望接受的數據類型,一般情況下服務端會根據accept的值，來決定返回數據的類型，並設置response中Content-type的值
default.headers = {
	common: {
		'Accept': 'application/json, text/plain, */*',
	}
}

給headers加上默認方法

<!-- 添加沒有數據的方法 -->
utils.forEach(['delete', 'get', 'header'], function forEachMethodNoData(method){
	default.headers[method] = {};
})
<!-- 添加有數據的方法 -->
utils.forEach([post', 'put', 'patch'], function forEachMethodNoData(method){
	//post put patch 方法需要傳遞參數，故需要設置傳參默認類型
	default.headers[method] = utils.merge(DEFAULT_CONTENT_TYPE);
})

總結

js設置的Content-Type為http請求頭中request中的Content-type,是告訴服務器客戶端要發送的數據的格式，get，delete請求默認無
js設置的Accept為http請求頭中request字段，告訴服務器客戶端希望接受的數據的格式
一般情況下服務端會設置http請求頭中response中的Content-type和request中Accept格式一樣，告訴客戶端服務端返回的數據格式
服務器可以根據Accept選擇不同的格式，選擇返回不同的格式，也可以不管Accpet
總得來說前端只能設置請求頭，響應頭只能客戶端設置