ax_Axios筆記_尚矽谷

阿新 • • 發佈：2021-10-23

程式碼專案

[ax_axios_尚矽谷 - 快捷方式.lnk](..\ab_code\ax_axios_尚矽谷 - 快捷方式.lnk)

get請求

返回內容

程式碼

帶引數get請求

返回內容

錯誤的搭配params和post

奇怪現象

理解

post請求_提交資料

post請求多數時候用來提交資料,當然也課查詢資料,誤絕對化.

輸出效果

提交之後,瀏覽器會自動重新整理

put請求_修改資料

失敗圖

成功圖

delete請求_刪除資料

效果圖

增刪改查(get post put delete)總結

傳送get請求的三種方式

程式碼圖

axios既可以當函式axios()

使用,又可以當做物件axios.request() , axios.get()使用

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>axios其他使用</title>
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2 class="page-header">get請求的幾種方式</h2>
      <button class="btn btn-primary">axios()函式傳送GET請求</button>
      <button class="btn btn-warning">axios.request()函式傳送GET請求</button>
      <button class="btn btn-success">axios.get()函式傳送GET請求</button>
    </div>
    <script>
      //獲取按鈕
      const btns = document.querySelectorAll("button");

      btns[0].onclick = function () {
        //axios()函式傳送GET請求
        axios({
          method: "GET",
          url: "http://localhost:3000/posts/",
          params: {
            id: 1,
          },
        }).then((res) => {
          console.log(res.data);
        });
      };

      btns[1].onclick = function () {
        //axios.request()函式傳送GET請求
        axios
          .request({
            method: "GET",
            url: "http://localhost:3000/posts",
            params: {
              id: 2,
            },
          })
          .then((res) => {
            console.log(res.data);
          });
      };

      btns[2].onclick = function () {
        // axios.get()函式傳送GET請求
        axios
          .get("http://localhost:3000/posts", {
            params: {
              id: 3,
            },
          })
          .then((res) => {
            console.log(res.data);
          });
      };
    </script>
  </body>
</html>

傳送post請求的三種方式

程式碼圖

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <title>axios其他使用</title>
    <link
      crossorigin="anonymous"
      href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  </head>

  <body>
    <div class="container">
      <h2 class="page-header">POST請求的幾種方式</h2>
      <button class="btn btn-primary">axios()函式傳送POST請求</button>
      <button class="btn btn-warning">axios.request()函式傳送POST請求</button>
      <button class="btn btn-success">axios.post()函式傳送POST請求</button>
    </div>
    <script>
      //獲取按鈕
      const btns = document.querySelectorAll("button");

      btns[0].onclick = function () {
        //axios()函式傳送POST請求
        axios({
          method: "POST",
          url: "http://localhost:3000/posts/",
          data: {
            title: "這是使用axios()通過post請求提交的文章",
            author: "Alice",
          },
        });
      };

      btns[1].onclick = function () {
        //axios.request()函式傳送POST請求
        axios.request({
          method: "POST",
          url: "http://localhost:3000/posts",
          data: {
            title: "這是通過axios.request()通過post提交的文章",
            author: "Bruce",
          },
        });
      };

      btns[2].onclick = function () {
        // axios.post()函式傳送POST請求
        axios.post("http://localhost:3000/posts", {
          data: {
            title: "這是通過axios.post()提交的文章",
            author: "Celina",
          },
        });
      };
    </script>
  </body>
</html>