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插槽这些高级用法让你的组件更强大
前端·javascript·vue.js
慧一居士13 小时前
Vue中 class 和 style 属性的区别对比
前端·vue.js
鹏仔工作室15 小时前
elemetui中el-date-picker限制开始结束日期只能选择当月
前端·vue.js·elementui
Lyuing16 小时前
el-input数字类型禁止+-符号输入
vue.js
拉不动的猪16 小时前
Token无感刷新全流程(Vue + Axios + Node.js(Express))
java·javascript·vue.js
再吃一颗苹果要不要16 小时前
Vue.js 源码解读:从 new Vue() 到 DOM 更新的完整追踪
vue.js
竹秋…18 小时前
el-table 滚动条小箭头点不了且部分滚动条无法拖动的问题
javascript·vue.js·elementui
香香爱编程18 小时前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
涔溪18 小时前
Vue 中实现 PDF 文件上传
javascript·vue.js·pdf
顾三殇18 小时前
【TRAE】AI 编程:颠覆全栈开发,基于 TRAE AI 编程完成 Vue 3 + Node.js + MySQL 企业级项目实战,从环境搭建到部署上线
vue.js·ai编程·trae·ai 开发工具