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
總得來說前端只能設置請求頭，響應頭只能客戶端設置