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();
      });
相关推荐
半山烟雨半山青31 分钟前
微信内容emoji表情包编辑器 + vue3 + ts + WrchatEmogi Editor
前端·javascript·vue.js
ss2731 小时前
SpringBoot+vue养老院运营管理系统
vue.js·spring boot·后端
用户841794814561 小时前
vue 甘特图 vxe-gantt table 依赖线的使用,配置连接线
vue.js
前端 贾公子2 小时前
Eruda:移动端网页调试利器
前端·javascript·vue.js
Hashan2 小时前
Elpis:抽离业务代码,发布NPM包
前端·javascript·vue.js
脾气有点小暴3 小时前
uniapp开发APP 内嵌外部 HTTPS 链接的实现方案
vue.js·uni-app
shuaijie05183 小时前
当表格数据量过大的时候,如何使用不分页进行展示
javascript·vue.js·ecmascript
JosieBook3 小时前
【Vue】03 Vue技术——Vue.js 入门学习笔记:Hello World 案例详解
vue.js·笔记·学习
lionliu05194 小时前
JavaScript 变量声明最佳实践
前端·javascript·vue.js
计算机毕设VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue酒店管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计