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();
      });
相关推荐
小爬的老粉丝1 天前
Vue 3 文件预览生产排障:Worker/WASM 404、鉴权 Blob 与子路径
javascript·vue.js·wasm
布兰妮甜1 天前
Vue 状态管理选型:Pinia 完整实战,对比 Vuex,模块化持久化
前端·javascript·vue.js·pinia·vuex
小锋java12341 天前
【技术专题】Vue3 - 条件渲染
vue.js·vite
JiaLin_Denny1 天前
Vue3中ref和reactive用法与双向数据绑定
前端·javascript·vue.js
无人生还1 天前
从 Vue3 到 React · 快速上手系列第 12 篇:并发特性与性能优化
前端·vue.js·react.js
柒@宝儿姐2 天前
若依 B 端从浏览器访问升级为 Windows 安装包交付流程
前端·javascript·vue.js·windows
达子6662 天前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒2 天前
v-tooltip自定义指令封装
前端·javascript·vue.js
万敏2 天前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜2 天前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载