axios配置请求头content-type 和 get/post请求方式

axios配置请求头content-type?

?https://blog.csdn.net/wojiushiwo945you/article/details/107653962

• 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)
        })

axios中get/post请求方式

1. 前言

最近突然发现post请求可以使用params方式传值，然后想总结一下其中的用法。

2.1 分类

get请求中没有data传值方式
经过查阅资料，get请求是可以通过body传输数据的，但是许多工具类并不支持此功能。
在postman中，选择get请求后，body选项自动变为了灰色。
即，不建议使用此方式传输数据。

2.2 get请求

params

基础类型接收，名字对应即可

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'GET',
    params: params
  })
}

// 后台
@GetMapping("/test")
public Result test(Long id, String name) {
    return Res.ok();
}

使用Map接收，需要添加?RequestParam?注解

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'GET',
    params: params
  })
}

// 后台
@GetMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {
    return Res.ok();
}

使用实体类接收

// 实体类
@Data
public class TestEntity {
    Long id;
    String name;
}

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'GET',	
    params: params
  })
}

// 后台
@GetMapping("/test")
public Result test(TestEntity testEntity) {
    return Res.ok();
}

ps: get请求不允许传递List，需要使用qs插件或者配置axios，具体参考链接

2.3 post请求

2.3.1 params 与 get方式相同

与get相似，基础类型接收，名字对应即可

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'POST',
    params: params
  })
}

// 后台
@PostMapping("/test")
public Result test(Long id, String name) {
    return Res.ok();
}

与get相似，使用map接收

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'POST',
    params: params
  })
}

// 后台
@PostMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {
    return Res.ok();
}

与get相似，使用实体类接收

// 实体类
@Data
public class TestEntity {
    Long id;
    String name;
}

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'POST',	
    params: params
  })
}

// 后台
@PostMapping("/test")
public Result test(TestEntity testEntity) {
    return Res.ok();
}

2.3.2 data

使用实体类接收

// 实体类
@Data
public class TestEntity {
    Long id;
    String name;
}

// method
const params = {
    id: '123456789',
    name: '张三'
}
test(params)

// api
export function test (params) {
  return axios({
    url: url,
    method: 'POST',	
    data: params
  })
}

@PostMapping("/test")
public Result test(@RequestBody TestEntity testEntity) {
    return Res.ok();
}

JAVA 复制 全屏

4. 总结

总体来说，只要使用?params?get与post请求基本是一样使用的，如果参数名与传递名称不一致，需要使用@RequestParam修饰，若使用Map接收参数，必须使用@RequestParam修饰。但是如果想传list类型的数据，需要使用单独的方法处理（参考链接）。
若使用data传递参数，必须使用一个实体类接收参数，而且需要添加注解@RequestBody进行修饰。