实现axios-处理post参数

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

准备

XMLHttpRequest 可以send的数据类型

• ArrayBuffer / ArrayBufferView
• Blob ( File)
• Document
• DOMString
• FormData
• 空 （ send() --> 一般发送get请求使用）

规范解释说DOMString指的是UTF-16字符串，而JavaScript正是使用了这种编码的字符串，因此，在Ajax中，DOMString就等同于JS中的普通字符串。

对应的content-type

application/x-www-form-urlencoded

1. 浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据
2. URLSearchParams ，浏览器不会自动设置，需要手动设置content-type

multipart/form-data; boundary=[xxx]

FormData 类型， 表单上传文件时，必须让 form 的 enctyped 等于这个值

var formdata=new FormData();
formdata.append("name","laotie");

！！！ 这种类型的发送方式，不能设置请求头部的**Content-Type**，应交给浏览器来处理。

application/json

​ JSON.stringify 序列化后的 JSON 字符串

text/html;charset=UTF-8 / application/xml;charset=UTF-8

​ 两者的区别 Document 类型HTML Document类型

/* data参数为表单数据组成的对象，dataToSend为待发送给后端的数据 */
var dataToSend = document.implementation.createDocument("", "formdata", null);
var tempData = dataToSend.documentElement;
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        var keyElement = doc.createElement(key);
        keyElement.appendChild(doc.createTextNode(data[key]));
        tempData.appendChild(keyElement);
    }
}

/*
xml文档格式示意：
<formdata>
    <key1> value1 </key1>
    <key2> value2 </key2>
</formdata>
*/

xhr.send(dataToSend);

！！！ 这种类型的发送方式，不能设置请求头部的**Content-Type**，应交给浏览器来处理。

text/plain;charset=UTF-8

​ DOMString / string

xhr.send('字符串数据');

如果请求头部没有设定Content-Type，且数据既不是FormData也不是 Document，则Content-Type默认为text/plain。

代码实现

src\helper\transform.ts

import utils from '../util/index'
function setContentTypeIfUnset(headers, value) {
    if (!utils.isUndefined(headers) && utils.isUndefined(headers['Content-Type'])) {
        headers['Content-Type'] = value;
    }
}
export function transformRequestData(data: any,headers:any): any {
    //  下面这些类型的数据交给浏览器自行设置
    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;
    }
    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;charset=utf-8');
        return JSON.stringify(data);
    }

    return data;
}