实现axios-处理post参数

举报
搞前端的半夏 发表于 2021/11/30 22:14:34 2021/11/30
【摘要】 大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,邀你进群,一起学习交流前端,成为更优秀的工程师~关注公众号:半夏话前端,了解更多前端知识!点我探索新世界! 准备 XMLHttpRequest 可以send的数据类型ArrayBuffer / ArrayBufferViewBlob ( File)Docume...

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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;
}
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200