Axios学习(2)---axios常用请求方法

淩亂°似流年 2021-08-02 22:11 519阅读 0赞

### Axios学习(2)—axios常用请求方法 ###

#### 一、axios常用的请求方法 ####

方法列举：get, post, put, patch, delete

*  get：一般用户获取数据
 *  post：一般用于表单提交与文件上传
 *  patch：更新数据（只将修改的数据推送到后端）
 *  put：更新数据（所有数据推送到服务端）
 *  delete：删除数据

备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

--------------------

#### 二、get方法 ####

*  方式一

如果不带有参数，代码如下：

axios
          .get("/data.json")
          .then(res => { 
            console.log(res);
          })
          .catch(err => { 
            console.log(err);
          });

如果带有参数，代码如下：

axios
          .get("/data.json", { 
            params: { 
              id: 12
            }
          })
          .then(res => { 
            console.log(res);
          })
          .catch(err => { 
            console.log(err);
          });

此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12

*  方式二

如果不带参数，代码如下：

axios({ 
              method:'get',
              url:'/data.json'
          }).then(res=>{ 
              console.log(res)
          })

如果带有参数，代码如下：

axios({ 
          method: "get",
          url: "/data.json",
          params:{ 
              id:12
          }
        }).then(res => { 
          console.log(res);
        });

此时表示，参数为id=12，最终的请求路径Request URL: http://localhost:8080/data.json?id=12

浏览器控制台相关信息介绍：

1.  Request URL：请求URL
2.  Request Method：请求方式

--------------------

#### 三、post方法 ####

**post请求常用的数据请求格式有两种：**

1.  form-data（常用于表单提交（图片上传、文件上传））

let data = { 
          id: 12
        };
        let formData = new FormData();
        for(let key in data){ 
          formData.append(key,data[key])
        }
        console.log(formData)
        axios.post('/data.json',formData).then(res=>{ 
          console.log(res,'formData')
        })

注意：请求地址Request URL: http://192.168.1.106:8080/data.json，

请求头中Content-Type: multipart/form-data; boundary=----WebKitFormBoundarydgohzXGsZdFwS16Y

参数形式：id:12

1.  application/json（常用）

*  方式一

let data = { 
          id: 12
        };
        axios.post("/data.json", data).then(res=>{ 
          console.log(res, 'post')
        });

*  方式二

let data = { 
          id: 12
        };
        axios({ 
          method:'post',
          url:'/data.json',
          data:data
        }).then(res=>{ 
          console.log(res)
        })

注意：请求地址Request URL: http://192.168.1.106:8080/data.json，

请求头中Content-Type: application/json;charset=UTF-8

参数形式：\{id:12\}

--------------------

#### 四、put方法 ####

let data = { 
          id: 12
        };
        axios.put("/data.json", data).then(res=>{ 
          console.log(res, 'put')
        });

--------------------

#### 五、patch方法 ####

let data = { 
          id: 12
        };
        axios.patch("/data.json", data).then(res=>{ 
          console.log(res, 'patch')
        });

--------------------

备注：put与patch与post方法只有method不同，其他相同。

#### 六、delete方法 ####

方式一：params

axios
          .delete("/data.json", { 
            params: { 
              id: 12
            }
          })
          .then(res => { 
            console.log(res, "delete");
          });

let params = { 
          id: 12
        };
        axios({ 
          method:'delete',
          url:'/data.json',
          params:params
        }).then(res=>{ 
          console.log(res)
        })

方式二：data

axios
          .delete("/data.json", { 
            data: { 
              id: 12
            }
          })
          .then(res => { 
            console.log(res, "delete");
          });

let data = { 
          id: 12
        };
        axios({ 
          method:'delete',
          url:'/data.json',
          data:data
        }).then(res=>{ 
          console.log(res)
        })

注意：params方式会将请求参数拼接在URL上面，Request URL: http://192.168.1.106:8080/data.json?id=12

参数形式：id:12

Content-Type: text/html; charset=utf-8

data方式不会讲参数拼接，是直接放置在请求体中的，Request URL: http://192.168.1.106:8080/data.json

参数形式：\{id:12\}

Content-Type: application/json;charset=UTF-8

***总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；***

--------------------

#### 七、并发请求 ####

并发请求，就是同时进行多个请求，并统一处理返回值。

在在例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：

// 并发请求
        axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
          axios.spread((dataRes, cityRes) => { 
            console.log(dataRes, cityRes);
          })
        );

注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。

并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

--------------------

#### 八. 温馨提示 ####

更多博文，请关注：**xssy5431** 小拾岁月  
扫码：  
![20200622115352592.jpg][]

[20200622115352592.jpg]: /images/20210802/e7eededb2c894a2e8c28d214d6200386.png