Axios學習(2)---axios常用請求方法

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

瀏覽器控制檯相關信息介紹：

Request URL：請求URL
Request Method：請求方式

三、post方法

post請求常用的數據請求格式有兩種：

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

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對返回值進行處理，即可。

併發請求的應用場景：需要同時進行多個請求，並且需要同時處理接口調用的返回值的時候，我們可以使用併發請求。

Axios學習(2)---axios常用請求方法