axios的传参方式

娃哈哈哈哈呀

已于 2024-01-19 18:12:55 修改

阅读量2.2k

点赞数 9

分类专栏： Vue 文章标签： vue.js

于 2024-01-17 11:01:35 首次发布

本文链接：https://blog.youkuaiyun.com/karlaofsky/article/details/135644219

版权

Vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了在使用Axios发送HTTP请求时，如何通过data、params和路径参数进行数据传递。data主要适用于POST请求，params用于GET请求的查询参数，而路径参数用于URL路径中动态数据的传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、data传参

2、使用 params 传递查询参数：

3、使用路径参数传递数据：

在使用 Axios 发送 HTTP 请求时，有三种常见的传参方式：data、params 和路径参数

1、data传参

  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` 传递查询参数：

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、使用路径参数传递数据：

 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();
      });