axios配置请求头content-type「建议收藏」

axios配置请求头content-type「建议收藏」axios是Ajax的一个插件,axios虽然是一个插件,但是我们不需要通过Vue.use(axios)来使用,下载完成后,只需在项目中引入即可。(一般我们放在了请求接口的公共文件中引用)npminstallaxios-Saxios发送post请求时默认是直接把json放到请求体中提交到后端的,axios默认的请求头content-type类型是’application/json;charset=utf-8’.content-type的三种常见数据格式://1默认.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

  • axios 是Ajax的一个插件,axios虽然是一个插件,但是我们不需要通过Vue.use(axios)来使用,下载完成后,只需在项目中引入即可。(一般我们放在了请求接口的公共文件中引用)
npm install axios -S
  • axios 发送post请求时默认是直接把 json 放到请求体中提交到后端的,axios默认的请求头content-type类型是’application/json;charset=utf-8’.

  • content-type的三种常见数据格式:

// 1 默认的格式请求体中的数据会以json字符串的形式发送到后端
  'Content-Type: application/json '
// 2 请求体中的数据会以普通表单形式(键值对)发送到后端
  'Content-Type: application/x-www-form-urlencoded'
// 3 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件
  'Content-Type: multipart/form-data'
  • Content-Type: application/json这种参数是默认的就不说了
  • 若后端需要接受的数据类型为:application/x-www-form-urlencoded,我们前端该如何配置:
    1 用 URLSearchParams 传递参数
var param = new URLSearchParams()
  param.append('name',name)
  param.append('age' , age)
axios(
	{
	  method:'post',
	  url: url,
	  data : param,
	}
	).then(res => res).catch(err => err)

2 配置axios请求头中的content-type为指定类型(这个比较常用)

axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

3 引入 qs ,这个库是 axios 里面包含的,不需要再下载了

import Qs from 'qs'
let params= {
    "name": "ll",
    "age": "18"
}

axios({
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    method: 'post',
    url: url,
    data: Qs.stringify(params)
})
  • 若后端需要接受的数据类型为:Content-Type: multipart/form-data,我们前端该如何配置:
    应用场景:对于这种类型的数据,我们常见前端页面上传个人图像,然后点击保存发送后端修改原始数据
let params = new FormData()
params.append('file', this.file)
params.append('qq', this.qq)
params.append('weChat', this.WeChat)
axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
          if (res.data.code === 0) {
                this.$router.go(-1)
          }
        }).catch(error => {
          alert('更新用户数据失败' + error)
        })
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/172671.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • My安装EclipseJS代码提示(Spket插件)

    My安装EclipseJS代码提示(Spket插件)

    2021年11月14日
  • RNN-bptt简单推导「建议收藏」

    RNN-bptt简单推导「建议收藏」摘要:在前面的文章里面,RNN训练与BP算法,我们提到了RNN的训练算法。但是回头看的时候在时间的维度上没有做处理,所以整个推导可能存在一点问题。那么,在这篇文章里面,我们将介绍bptt(BackPropagationThroughTime)算法如在训练RNN。关于bptt这里首先解释一下所谓的bptt,bptt的思路其实很简单,就是把整个RNN按时间的维度展

  • 微信小程序商城项目实战(第七篇:生成订单支付页)

    微信小程序商城项目实战(第七篇:生成订单支付页)订单支付分析代码实现效果图展示分析顶部改为”支付”上方为地址,跳转至地址管理,可修改下方为订单信息最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页如果不支付则可以在我的订单内容查看该订单并且继续支付代码实现改变顶部导航内容”navigationBarTitleText”:”支付”界面:<navigatorurl=”/pages/addressList/addressList”class=”user_info_row”wx:if=”{{statu!=’待发

  • 域名备案信息修改(未备案域名解析到国内服务器)

    域名备案后修改服务器内容精选换一换PHPWind(简称:PW)是一个基于PHP和MySQL的开源社区程序,是国内较受欢迎的论坛之一。轻架构,高效易开发,使用户可快速搭建并轻松管理。本文档指导用户使用华为云市场镜像“PHPWind论坛社区系统(LAMP)”部署PHPWind论坛系统。弹性云服务器所在安全组添加了如表1所示的安全组规则,具体步骤参见为安全组添加安全组规则。MWordPress简称W…

  • 原码补码反码在线计算_补码的补码是原码

    原码补码反码在线计算_补码的补码是原码[-3]反=[10000011]反=11111100原码反码负数的补码是将其原码除符号位之。两个说法都没有错,我们举个例子来看看就明白了:1、10001的补码是取反后在再加1,也就是11110+1=11111;2、如果是11111变回原码呢?我们可以采取逆过程先减1,.(1)原码表示法原码表示法是机器数的一种简单的表示法。其符号位用0表示正号,用:表示负号,数值一般用二进制形式表示。设有一…

  • 线程通信

    线程通信线程通信wait(),notify(),notifyALL()方法/**线程通信例子:使用两个线程打印1-100,线程1和线程2交替打印*涉及到的三个方法:wait():一旦执行此方法

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号