为什么axios会有params和data两个参数_前端为什么要加两个data

不知道大家有没有过这种感觉，突然一个问题百思不得其解，然后突然有一天就明白了。然后就感觉这个问题原来这么简单，本来想记录下来，但是又感觉这么简单的问题记录下来没啥意义。但是回过头来想一想，这个问题之前其实困扰了你很长时间。感觉还是记录一下比较好，万一哪一天突然对这个问题有了新的扩展呢？

先来回顾一下axios的基本使用，怎么发送一个请求：

发送get请求

// 发送的链接就是 https://www.baidu.com?a=1
axios.get('https://www.baidu.com', { params: { a: 1 } })

// 或者这样
axios({
  method: "get",
  url: 'https://www.baidu.com',
  params: { a: 1 }
})

// 如果发送一个带请求头的就是这样
axios.get('https://www.baidu.com', { params: { a: 1 }, headers: { token: "123" } })

// 或者这样
axios({
  method: "get",
  url: 'https://www.baidu.com',
  params: { a: 1 },
  headers: { token: "111" }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

发送post请求

axios.post('https://www.baidu.com', { a: 1 })

// 或者这样
axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 }
})

// 如果发送一个带请求头的就是这样
axios.post('https://www.baidu.com', { a: 1 }, { headers: { token: "123" } })

// 或者这样
axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 },
  headers: { token: "111" }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里我们可以发现

axios.get可以传递两个参数 url和其他参数
axios.post可以传递三个参数 url、请求发出去的参数、其他参数

好像不方便记忆，一会传2个，一会传3个的。所以一般情况下，即使是对项目封装网络请求，我也会使用axios()去封装，而不是使用axios.get和axios.post。

那么使用axios()，get请求时如果给请求传一些参数，那么可以使用params，例如：

axios({
  method: "get",
  url: 'https://www.baidu.com',
  params: { a: 1 }
})
1
2
3
4
5

而使用post的时候需要使用data，例如：

axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 }
})
1
2
3
4
5

好奇挂啊，为什么不能使用同一个参数呢？其实params和data有各自的使用意义。

params是拼接在url后面的参数
data是请求体里面的参数

例如发送post的时候

axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 },
  params: { a: 2 }
})
1
2
3
4
5
6

上面例子a=1会放在url后面拼接，而a=2会在请求体中。所以params和data其实是各司其职的。

那么再来看一下，如果像使用axios.post，我既想在url后面拼接参数，又想在请求体里面有参数，该怎么写呢？

axios.post('https://www.baidu.com', { a: 1 }, { params: { a: 1 }, headers: { token: "123" } })
1

所以还是感觉直接调用axios好用