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();
      });
相关推荐
fruge5 分钟前
Vue3 与 Vue2 核心差异:响应式原理、生命周期及迁移方案
前端·javascript·vue.js
zlpzlpzyd11 分钟前
vue.js 3项目整合vue-router 4的问题
前端·javascript·vue.js
m0_7400437331 分钟前
父组件 子组件
javascript·vue.js·ecmascript
时间的情敌1 小时前
Vue3 和 Vue2 的核心区别
前端·javascript·vue.js
毕设十刻1 小时前
基于Vue的旅游网站yzwa8(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
数据库·vue.js·旅游
一字白首1 小时前
Node.js+Vue 联动,Vue 快速上手:基础学习
vue.js·学习·node.js
悟能不能悟1 小时前
vue项目,url访问不了,用route-link跳过去就可以访问,为什么
前端·javascript·vue.js
程序媛_MISS_zhang_01101 小时前
APP中列表到详情,详情返回列表时候,返回定位到之前查看详情那条数据
前端·javascript·vue.js
还有多远.1 小时前
前端部署后自动检测更新
前端·javascript·vue.js
爱吃无爪鱼1 小时前
02-前端开发核心概念完全指南
css·vue.js·前端框架·npm·node.js·sass