一.  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. Java绘图基础

    <零基础学Java> Java绘图基础 绘图是高级程序设计中非常重要的技术,例如,应用程序需要绘制闪屏图像.背景图像.组件外观Web程序可以绘制统计图.数据库存储的图像资源等. Graph ...

  2. PowerShell 定时刷新查看文件内容

    get-content .\1.txt -ReadCount 0 -Tail 5 -Wait

  3. 小样本利器2.文本对抗+半监督 FGSM & VAT & FGM代码实现

    小样本利器2.文本对抗+半监督 FGSM & VAT & FGM代码实现 上一章我们聊了聊通过一致性正则的半监督方案,使用大量的未标注样本来提升小样本模型的泛化能力.这一章我们结合FG ...

  4. 详解升讯威在线客服系统前端 JavaScript 脚本加密技术(1)

    我在业余时间开发维护了一款免费开源的升讯威在线客服系统,也收获了许多用户.对我来说,只要能获得用户的认可,就是我最大的动力. 这段时间有几个技术小伙伴问了我一个有意思的问题:"你的前端脚本是 ...

  5. 2022省选前联考 AVL树/平衡树

    题目描述 pks 得到了一棵 \(N\) 个节点,权值为 \(1\sim N\) 的 \(AVL\) 树,他觉得这棵树太大了,于是他想要删掉一些节点使得最后剩下的树恰好有 \(K\) 个节点.如果 p ...

  6. 使用APICloud AVM框架开发预约应用

    前段时间跟朋友一起搞了一个预约的项目,前端用的APICloud的AVM框架做的,后端用的php开发的,用的tp5框架,没几天就搞出来了.简单跟大家分享一下开发中的一些功能点的实现吧.也欢迎大家一起探讨 ...

  7. Phabricator Conduit API介绍

    在Phabricator页面,可以完成创建和编辑Project.Task等操作.但是如果想实现外部系统可以自主操作Phabricator,那么就需要调用Phabricator Conduit API, ...

  8. centos 7系统安装

    1.打开VMware软件,点击创建虚拟机,默认选择,点击下一步 2.选择稍后安装,点击下一步 3.在Linux系统中选择CentOS 7 64位,点击下一步 4.选择好安装位置后,点击下一步 5.选择 ...

  9. hive SQL 初学者题目,实战题目 字符串函数,日期拼接,开窗函数。。。。

    sql:Hive实现按照指定格式输出每七天的消费平均数输出格式:2018-06-01~2018-06-07 12.29...2018-08-10~2018-08-16 80.67 答案:-- 1.先将 ...

  10. SP8496 NOSQ - No Squares Numbers 题解

    To SP8496 这道题可以用到前缀和思想,先预处理出所有的结果,然后 \(O(1)\) 查询即可. 注意: 是不能被 \(x^2(x≠1)\) 的数整除的数叫做无平方数. \(d\) 可以为 \( ...