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();
      });
相关推荐
悟能不能悟30 分钟前
<style scoped>vue中怎么引用css文件
css·vue.js
向葭奔赴♡40 分钟前
若依系统权限控制全流程解析
前端·javascript·vue.js·ruoyi·navicat
u***u6851 小时前
Vue虚拟现实案例
前端·vue.js·vr
艾小码1 小时前
Vue 3 defineProps 与 defineEmits 深度解析
前端·javascript·vue.js
lumi.6 小时前
Vue + Element Plus 实现AI文档解析与问答功能(含详细注释+核心逻辑解析)
前端·javascript·vue.js·人工智能
S***t7148 小时前
Vue面试经验
javascript·vue.js·面试
N***738510 小时前
Vue网络编程详解
前端·javascript·vue.js
WYiQIU12 小时前
面了一次字节前端岗,我才知道何为“造火箭”的极致!
前端·javascript·vue.js·react.js·面试
小夏同学呀12 小时前
在 Vue 2 中实现 “点击下载条码 → 打开新窗口预览 → 自动唤起浏览器打印” 的功能
前端·javascript·vue.js
芳草萋萋鹦鹉洲哦12 小时前
【vue】导航栏变动后刷新router的几种方法
前端·javascript·vue.js