[Axios für Netzwerkanfragen] Grundlegende Verwendung von Axios

1. Axios-Übersicht

axios ist eine Bibliothek, die sich auf Netzwerkanforderungen konzentriert.
Nachdem Axios die Daten angefordert hat, legt es eine Hülle auf die echten Daten.

2. Grundlegende Verwendung von Axios

2.1 Get-Anfrage senden

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnGet">发送GET请求</button>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document.querySelector("#btnGet").addEventListener("click", function () {
      
      
        axios({
      
      
          // 请求方式
          method: "GET",
          // 请求地址
          url: "http://www.liulongbin.top:3006/api/getbooks",
          // URL中的查询参数
          params: {
      
      
            id: 2,
          },
        }).then(function(result) {
      
      
            console.log(result);
        })
      });
    </script>
  </body>
</html>

Ergebnis:
Bildbeschreibung hier einfügen

2.2 Postanfrage senden

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>


      document.querySelector('#btnPost').addEventListener('click', function() {
      
      
        axios({
      
      
            method: 'POST',
            url: 'http://www.liulongbin.top:3006/api/post',
            // 请求体参数
            data: {
      
      
                name: 'zs',
                age: 12,
            }
        }).then(function(result) {
      
      
            console.log(result);
        })
      })
    </script>
  </body>
</html>

Ergebnis:
Bildbeschreibung hier einfügen

3. Verwenden Sie async...await und eine destrukturierende Zuweisung, um den Code umzuwandeln

3.1 Warum kann async/await verwendet werden?

Bildbeschreibung hier einfügen
Ergebnis:

Der Rückgabewert von Axios ist vom Typ Promise.

3.2 Nehmen wir als Beispiel das Senden einer Post-Anfrage

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document.querySelector("#btnPost").addEventListener("click", async function () {
      
      
        // 解构赋值的时候，使用 : 进行重命名
        // 1. 调用 axios 之后，使用 async/await 进行简化
        // 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
        // 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
        const {
      
       data: res } = await axios({
      
      
          method: "POST",
          url: "http://www.liulongbin.top:3006/api/post",
          // 请求体参数
          data: {
      
      
            name: "zs",
            age: 12,
          },
        });
        console.log(res);
      });
    </script>
  </body>
</html>

Ergebnis:
Bildbeschreibung hier einfügen

4. Verwenden Sie axios, um Anfragen direkt zu senden

4.1 Verwenden Sie Axios, um eine Get-Anfrage direkt zu senden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnGet">发送GET请求</button>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document
        .querySelector("#btnGet")
        .addEventListener("click", async function () {
      
      
          const {
      
       data: res } = await axios.get(
            "http://www.liulongbin.top:3006/api/getbooks",
            {
      
      
              params: {
      
      
                id: 3,
              },
            }
          );
          console.log(res.data);
        });
    </script>
  </body>
</html>

Ergebnis:
Bildbeschreibung hier einfügen

4.2 Verwenden Sie axios, um Post-Anfragen direkt zu senden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btnPost">发送POST请求</button>
    <!-- 引入axios -->
    <script src="/lib/axios.js"></script>
    <script>
      document
        .querySelector("#btnPost")
        .addEventListener("click", async function () {
      
      
          const {
      
       data: res } = await axios.post(
            "http://www.liulongbin.top:3006/api/post",
            {
      
       name: "zs", age: 20 }
          );
          console.log(res);
        });
    </script>
  </body>
</html>

Hinweis: Die Anforderungstextparameter hier können direkt in {} geschrieben werden, ohne Datenergebnisse hinzuzufügen
:
Bildbeschreibung hier einfügen

5. Referenz

Dark-Horse-Vue-Video, danke an Lehrer llb.

Es wird empfohlen, das HTTP-Protokoll zu verstehen, bevor Sie Axios lernen.