一.  axios参数的传递方式

    首先我们要知道  参数传递一般有两种,一种是 使用 params, 另一种是 data的方式,有很多的时候我们看到的前端代码是这样的。

   1. get请求:

axios({
method: 'GET',
url: 'xxxxx',
params: params,
})
或者
axios({
method: 'GET',
url: '/xxx?id=' + xxx,
})

2. post请求

axios({
method: 'POST',
url: '/xxxxx',
data: params,
})
或者
axios({
method: 'POST',
url: '/xxxxx',
params: params,
})

 3. params 的形式的传参 参数会被拼接到url上面(params 是查询参数,拼在 URL 问号后面的)   如下图: 

      

  4. data形式传参, axios会自动处理设置Content-Type不需要手动设置

    

      (1) 比如发送一个下面的请求, 会发现请求头的content-type是application/json;charset=UTF-8

axios({
url: '/login',
method: 'post',
data: {email: 'xxxx', password: 123123}
})

(2) 比如发送一个上传文件的请求formdata, 会发现请求头的content-type是multipart/form-data

let formData = new FormData()
formData.append('file', file)
axios({
url: '/login',
method: 'post',
data: formData
})

二 . 查看axios源码, 对比 data和params两种参数处理方法

      1. 处理data

  在axios文件中 的 core/dispatchRequest.js 中:

          

       在 axios 的 default.js 中,有一个函数专门转换 data 参数的 :

            

注意: 上面只是举例 data 传递参数的一种情况哈!其实data 也有在地址栏 上 拼接的情况,或者 是文件上传的等情况。太多了,这里 只是讲清楚使用的方式。

2.  处理 params

         在axios文件中 的 adapt/ xhr.js 中,我们可以看到 :

              

  buildUrl 一些关键代码如下 :

              

参考链接 :https://blog.csdn.net/qq_41499782/article/details/118916901

https://segmentfault.com/q/1010000018679505?utm_source=sf-similar-question

https://segmentfault.com/q/1010000040731240

axios的content-type是自动设置的的更多相关文章

  1. Jsoup问题---获取http协议请求失败 org.jsoup.UnsupportedMimeTypeException: Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml.

    Jsoup问题---获取http协议请求失败 1.问题:用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不 ...

  2. Jsoup获取部分页面数据失败 org.jsoup.UnsupportedMimeTypeException: Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml.

    用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不符合要求. 请求代码如下: private static ...

  3. SharePoint自动化系列——Content Type相关timer jobs一键执行

    转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 背景: 在SharePoint Central Administration->Monito ...

  4. 转载 SharePoint【Site Definition 系列】– 创建Content Type

    转载原地址:  http://www.cnblogs.com/wsdj-ITtech/archive/2012/09/01/2470274.html Sharepoint本身就是一个丰富的大容器,里面 ...

  5. the request doesn't contain a multipart/form-data or multipart/form-data stream, content type header

    the request doesn't contain a multipart/form-data or multipart/form-data stream, content type header ...

  6. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'multipart/form-data;boundary=----WebKitFormBoundaryRAYPKeHKTYSNdzc1;charset=UTF-8' not supported

    原文:https://www.cnblogs.com/yueli/p/7552888.html 最近同事在做一个图片上传功能.在入参 body 中同时传入文件和其它基本信息结果出现如题异常.在此记录下 ...

  7. duilib 增加gif控件(基于gdi+,可控制播放暂停,自动设置大小)

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/42502081 因为项目需要我需要给duilib增加一个gif控件,目前已 ...

  8. ajax使用向Spring MVC发送JSON数据出现 org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported错误

    ajax使用向Spring MVC发送JSON数据时,后端Controller在接受JSON数据时报org.springframework.web.HttpMediaTypeNotSupportedE ...

  9. org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/json;charset=UTF-8' not supported或其他Content type不支持处理

    很久没从头到尾搭框架,今天搭的过程中,springmvc controller方法入参用@RequestBody自动绑定参数时一直提示各种 not supported 排查问题有两个解决路径: 1)使 ...

  10. Jmeter发送post请求报错Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

    常识普及: Content-type,在Request Headers里面,告诉服务器,我们发送的请求信息格式,在JMeter中,信息头存储在信息头管理器中,所以在做接口测试的时候,我们维护Conte ...

随机推荐

  1. rpm构建流程学习总结

    rpm构建流程 学习链接: b站马哥: https://www.bilibili.com/video/BV1ai4y1N7gp RedHat: https://access.redhat.com/do ...

  2. 实测:云RDS MySQL性能是自建的1.6倍

    1. 摘要 基于之前写的「云厂商 RDS MySQL 怎么选」的文章,为了进一步了解各云厂商在RDS MySQL数据库性能上的差异,本文将对自建MySQL.阿里云.腾讯云.华为云和AWS 的 RDS ...

  3. Windows-matlab简易安装-用于数字图像处理

    安装 下载链接 解压文件得到 双击setup.exe 主要注意几点 使用文件安装密匙 只需安装这三个即可 将两个文件夹里面的dll文件复制到安装目录的 /bin/win64 目录 两个 .lic 文件 ...

  4. react native 0.6x 在创建项目时,CocoaPods 的依赖安装步骤卡解决方案

    前言 你需要做两件事 gem换源 pod repo 换源 实战 如果你已经成功安装了CocoaPods.那么这里你需要卸载它.gem换源1. 卸载CocoaPods 查看gem安装的东西 gem li ...

  5. SAP Picture Control(图片加载)

    Screen display 效果 源代码 program sap_picture_demo. set screen 200. TYPE-POOLS cndp. ******************* ...

  6. Eclipse 想运行一个java文件,结果却运行了另外一个

    参考: Eclipse 想运行一个java文件,结果却运行了另外一个_小鹰信息技术服务部-CSDN博客_eclipse怎么运行另一个

  7. plain framework的实际应用和扩展

    首先在这里庆祝香港回归祖国的怀抱25周年,想起那年还是一个小学生戴着红领巾和胸章激动不已,实现祖国的统一是每个中华儿女从小的梦想!趁着这欢庆的日子,突然想要写些什么,其实最近也在做一些事,由于工作繁忙 ...

  8. adb工具

    ADB:全称为Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具.   首先,下载ADB工具并安装:   下载:百度就有.下载后是个压缩包,将其拷贝到cm ...

  9. Spring框架系列(14) - SpringMVC实现原理之DispatcherServlet处理请求的过程

    前文我们有了IOC的源码基础以及SpringMVC的基础,我们便可以进一步深入理解SpringMVC主要实现原理,包含DispatcherServlet的初始化过程和DispatcherServlet ...

  10. HMS Core图形图像技术展现最新功能和应用场景,加速构建数智生活

    [2022年7月15日,杭州]HUAWEI Developer Day(华为开发者日,简称HDD)杭州站拉开帷幕.在数字经济不断发展的今天,开发者对图形图像的开发需求更加深入和多样化,从虚拟环境重构到 ...