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();
      });
相关推荐
香菜狗9 分钟前
vue3响应式数据(ref,reactive)详解
前端·javascript·vue.js
拾光拾趣录23 分钟前
为什么我们要亲手“捏”一个 Vue 项目?
前端·vue.js·性能优化
顽疲1 小时前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app
The_era_achievs_hero1 小时前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(六)Interaction 对象
前端·vue.js·经验分享·笔记·web
前端开发爱好者3 小时前
尤雨溪力荐 Vue-Plugins-Collection!Vue 生态 最强插件 导航!
前端·javascript·vue.js
_未完待续3 小时前
框架实战指南-透明元素
前端·vue.js
he___H4 小时前
VUE的学习
前端·vue.js·学习
速易达网络4 小时前
PHP 与 Vue.js 结合的前后端分离架构
vue.js·php
帧栈4 小时前
开发避坑短篇(5):vue el-date-picker 设置默认开始结束时间
前端·vue.js·elementui