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 =https://www.cnblogs.com/zgddan/p/='string'){
try{
data = https://www.cnblogs.com/zgddan/p/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
總得來說前端只能設定請求頭，回應頭只能客戶端設定
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178082.html
標籤：JavaScript
上一篇：LINE 專案總結
下一篇：計算機專用英語詞匯