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();
      });
相关推荐
景早4 分钟前
小黑记账清单案例(axios,echarts,vue)
前端·vue.js·echarts
Java 码农1 小时前
vue 使用vueCli 搭建vue2.x开发环境,并且指定ts 和less
前端·vue.js·less
计算机学姐1 小时前
基于SpringBoot的公务员考试管理系统【题库组卷+考试练习】
java·vue.js·spring boot·后端·java-ee·intellij-idea·mybatis
逆风优雅2 小时前
vue 实现自定义message 全局提示
前端·javascript·vue.js
fruge5 小时前
Vue项目中的Electron桌面应用开发实践指南
前端·vue.js·electron
这是个栗子10 小时前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
花姐夫Jun11 小时前
基于Vue+Python+Orange Pi Zero3的完整视频监控方案
vue.js·python·音视频
533_12 小时前
[vue3] h函数,阻止事件冒泡
javascript·vue.js·elementui
蒲公英源码12 小时前
php+vue知识付费系统前后端全套源码
vue.js·php
通往曙光的路上12 小时前
day22_用户授权 头像上传
javascript·vue.js·ecmascript