Vue---axios-get/post请求

淩亂°似流年 2023-07-21 06:08 8阅读 0赞

**注：以下的 $axios 是将 axios 挂到了Vue的原型链上，这样页面可直接使用  $axios ，而不需要在页面导入axios。**

**Get请求方式一(不常用)：**

this.$axios.get("/spring/boot/test1?name=lyz").then(
          response => console.log(response),
          err => console.log(err)
     );

**Get请求方式一(常用)：**

this.$axios
      .get("/spring/boot/test1", {
         params: {
           name: "lrt"
         }
      })
      .then(
         response => console.log(response),
           err => console.log(err)
    );

**Post请求方式一：**

this.$axios
      .post("/spring/boot/test2", {
         name: "cx"
       })
      .then(
         response => console.log(response.data),
          err => console.log(err)
    );

**Post请求方式二：**

this.$axios
      .post("/spring/boot/test2", {
         params : {             
             name: "cx"
         }
       })
       .then(
         response => console.log(response.data),
         err => console.log(err)
    );

**   **

** 若Java后端以@RequestParam注解接收参数时，使用上述两种Post请求方式请求数据时，都会报400错误。因为后端接收不到参数。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

**解决方案一：**

**  请求时加入请求头的content-type信息。**

this.$axios
      .post(
         "/spring/boot/test3",{
            headers: {
              "content-type": "application/x-www-form-urlencoded;charset=UTF-8"
            }
         },
         {
            params: {
              name: "cx"
            }
       })
       .then(
           response => console.log(response.data),
           err => console.log(err)
    );

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1][]

**解决方案二：**

**       使用URLSearchParams或者FormData传参数。**

let param = new URLSearchParams(); //使用URLSearchParams传参数
    param.append("name", "admin");
    
    this.$axios
        .post("/spring/boot/test3", param)
        .then(
            response => console.log(response),
            err => console.log(err)
    );

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 2][]

**以上两种解决方案原理：**

**       axios的Post请求方式，默认的提交数据方式是 application/json;charset=UTF-8 ，将其修改为 application/x-www-form-urlencoded;charset=UTF-8 方式。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20230528/e93c3489828c449b89d84b388ca8217b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1]: /images/20230528/d11161612a264520bc97b6745bb223d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 2]: /images/20230528/0194f21533e64d3bb71480d5d0a88348.png