TS重构axios——处理headers_ts+ axios配置请求头部

处理headers

判断是否是一个普通对象

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

逻辑过程

处理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]
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果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
}
1
2
3
4
5
6
7
8
9
10

调用处理函数

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

汇总参数

必须要先处理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)
} 
1
2
3
4
5
6
7
8
9

设置请求headers

function axios(config : AxiosRequestConfig) : void{
    processConfig(config)
    xhr(config)
}
1
2
3
4

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)
}
1
2
3
4
5
6
7
8
9
10
11
12