处理headers

判断是否是一个普通对象

// 判断是否是一个普通对象
export function isPlainObject(val : any) : boolean {
    return toString.call(val) === '[object Object]'
} 

逻辑过程

处理headers的大小写问题

参数:

  • headers:发送请求的headers
  • normalizeName:正确的headers的key
// 用于矫正header中特定的key
function normalizeHeaderName(headers: any, normalizeName: string): void {
    // headers不存在
    if(!headers) {
        return
    }
    Object.keys(headers).forEach((name) => {
        // key大小写不同的情况下
        if (name !== normalizeName && name.toUpperCase() === normalizeName.toUpperCase()) {
            // 将原有的value 赋值给 新的key
            headers[normalizeName] = headers[name]
            // 删除原有的key
            delete headers[name]
        }
    })
}

如果headers中没有Content-Type,那么就直接配置

export function processHeaders (headers: any, data: any) {
    normalizeHeaderName(headers, 'Content-Type')
    if(isPlainObject(data)) {
        // 未配置headers的Content-Type
        if(headers && !headers['Content-Type']) {
            headers['Content-Type'] = 'application/json;charset=utf-8'
        }
    }
    return headers
}

调用处理函数

function transformHeaders(config : AxiosRequestConfig) : any {
    // 如果config中没有headers,那么默认值就为{},否则之后不能添加headers
    const { headers = {}, data } = config
    return processHeaders(headers, data)
}

汇总参数

必须要先处理headers

因为处理data的时候,将data转化为json字符串,已经不是普通对象类型了,所以对header的处理有影响

// 处理config
function processConfig(config : AxiosRequestConfig) : void {
    // 处理url
    config.url = transformURL(config)
	// 处理headers
    config.headers = transformHeaders(config)
    // 处理data
    config.data = transformRequestData(config)
} 

设置请求headers

function axios(config : AxiosRequestConfig) : void{
    processConfig(config)
    xhr(config)
}
export default function xhr(config : AxiosRequestConfig) {
    const {data = null, url, method = 'GET', headers} = config
    const request = new XMLHttpRequest()

    request.open(method.toUpperCase(),url,true)
    
    Object.keys(headers).forEach((name) => {
        request.setRequestHeader(name,headers[name])
    })

    request.send(data)
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐