为什么axios会有params和data两个参数

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

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

发送get请求

javascript 复制代码
// 发送的链接就是 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" }
})

发送post请求

javascript 复制代码
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" }
})

这里我们可以发现

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

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

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

javascript 复制代码
axios({
  method: "get",
  url: 'https://www.baidu.com',
  params: { a: 1 }
})

而使用post的时候需要使用data,例如:

javascript 复制代码
axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 }
})

好奇挂啊,为什么不能使用同一个参数呢?其实paramsdata有各自的使用意义。

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

例如发送post的时候

javascript 复制代码
axios({
  method: "post",
  url: 'https://www.baidu.com',
  data: { a: 1 },
  params: { a: 2 }
})

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

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

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

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

相关推荐
@小红花20 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵23 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲38 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年41 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html