axios的传参方式

在使用 Axios 发送 HTTP 请求时,有三种常见的传参方式:dataparams 和路径参数

1、data传参

javascript 复制代码
  this.$axios({
     method: "post",
     url: "http://localhost:8080/api/user/login",
     data: {
             userId: this.userId,
             password: this.password,
          },
   })
    .then((res) => {
      console.log(res);
  })
  .catch(error => {
    console.error(error);
  });

2、使用 params 传递查询参数:

javascript 复制代码
axios.get('/api/users', {
  params: {
    page: 1,
    limit: 10
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

params参数通常用于GET请求中添加查询参数,而对于POST请求,一般使用data参数来传递请求体数据。

3、使用路径参数传递数据:

javascript 复制代码
 deleteUser(userId) {
      this.$axios({
        method: 'post',
        url: 'http://localhost:8080/api/user/deleteUser/' + userId,
      }).then((res) => {
        //显示删除成功
        this.$message({
          message: res.data.message,
          type: "success",
        });
        //刷新表格数据
        this.userAll();
      });
相关推荐
橙某人2 小时前
LogicFlow 小地图性能优化:从「实时克隆」到「占位缩略块」!🚀
前端·javascript·vue.js
boooooooom3 小时前
讲清 Proxy + effect + track/trigger 流程
javascript·vue.js·面试
leafyyuki3 小时前
在 Vue 项目中玩转 FullCalendar:从零搭建可交互的事件日历
前端·javascript·vue.js
星_离4 小时前
《Vue 自定义指令注册技巧:从手动到自动,效率翻倍》
前端·vue.js
光影少年4 小时前
Vue的响应式原理?Vue2和Vue3有什么区别?
前端·vue.js·掘金·金石计划
wuhen_n6 小时前
v-model 的进阶用法:搞定复杂的父子组件数据通信
前端·javascript·vue.js
wuhen_n6 小时前
TypeScript 深度加持:让你的组合式函数拥有“钢筋铁骨”
前端·javascript·vue.js
滕青山6 小时前
基于 ZXing 的 Vue 在线二维码扫描器实现
前端·javascript·vue.js
踩着两条虫7 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(五):创建 H5 移动应用
前端·vue.js·ai编程
踩着两条虫7 小时前
AI 驱动的 Vue3 应用开发平台 入门指南(二):快速入门
前端·vue.js·ai编程