美文网首页
关于jquery.ajax 与axios 请求接口的reques

关于jquery.ajax 与axios 请求接口的reques

作者: 说好的幸福2020 | 来源:发表于2019-06-19 10:50 被阅读0次

请求接口,传递参数发送请求时候,后端会指定传递的参数类型(即request header的content-type)
如果了解jquery.ajax 与axios,可以省略指定,让浏览器根据传递参数类型与添加。
例如登陆接口,要求前端请求的request Content-Type类型 "Content-Type": "application/x-www-form-urlencoded",
如果header中传递数据如下,就不用手动设置Content-Type:
    data: paramsData,
    transformRequest: [function(data) {
        data = Qs.stringify(data);  // Qs使用情况在文后
        return data;
    }],

规则如下:
1  jQuery.ajax的post提交默认的请求头的Content-Type: application/x-www-form-urlencoded
2  axios,在data是内置对象的时候会进行一些自动设置,
        (1)  当 data 是 FormData 时,即便设置content-type 的值,也会被强制删除,让浏览器自己设置为multipart/form-data。
       (2)   当 data 为 URLSearchParams 对象时设置为 application/x-www-form-urlencoded;charset=utf-8,
       (3)    当 data 为普通对象(包含数组)时,会被设置为 application/json;charset=utf-8

/* qs 使用说明
    qs是一个npm仓库所管理的包
1. qs.parse()将URL解析成对象的形式。
    const qs= require('qs');
    let url = "admin=jack&appToken=abcdefg";
    qs.parse(url);
    console.log(qs.parse(url));

    会生成{admin:’jack‘,appToken:'abcdefg'}
2 qs.stringify()将对象 序列化成URL的形式,以&进行拼接
    如上,qs.stringify({admin:’jack‘,appToken:'abcdefg'}),变为  "admin=jack&appToken=abcdefg"

    如果改变的是数组,默认情况下,它们给出明确的索引,如下代码
        qs.stringify({ a: ['b', 'c', 'd'] });       // 'a[0]=b&a[1]=c&a[2]=d'
    也可以进行重写这种默认方式为false
        qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });   // 'a=b&a=c&a=d'

    当然,也可以通过arrayFormat 选项进行格式化输出,如下代码所示:
    qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })    // 'a[0]=b&a[1]=c'
    qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })  // 'a[]=b&a[]=c'
    qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })     // 'a=b&a=c'

在这里需要注意的是,JSON中同样存在stringify方法,但是两者之间的区别是很明显的,如下所示:
{"uid":"yh9999","pwd":"sh9999"}  // JSON.stringify(param)
uid=yh9999&pwd=sh9999   //Qs.stringify(param)
如上所示,前者是采用JSON.stringify(param)进行处理,后者是采用Qs.stringify(param)进行处理的

关于form数据提交的文章https://www.cnblogs.com/bester-ace/articles/9234229.html

相关文章

网友评论

      本文标题:关于jquery.ajax 与axios 请求接口的reques

      本文链接:https://www.haomeiwen.com/subject/sajhqctx.html