一、ajax請求

    <script>
        // ajax傳送的GET請求
        $.ajax({
            type: "GET",
            url: "test.js",
            dataType: "script"
        });
        // ajax傳送的POST請求
        $.ajax({
            type: "POST",
            url: "some.php",
            data: "name=John&location=Boston",
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
        });
    </script>
 

二、Axios 請求

//具體來源網址https://www.kancloud.cn/yunye/axios/234845
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//執行 GET 請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求可以這樣做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//執行 POST 請求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//執行多個併發請求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求現在都執行完成
  }));


//可以通過向 axios 傳遞相關配置來建立請求

//axios(config)
// 傳送 POST 請求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});


//axios(url[, config])
// 傳送 GET 請求（預設的方法）
axios('/user/12345');
 

三、axios中的請求(Promise)

<script src="./axios.min.js"></script>
  <script>
    /* axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {
      id: 1
    }}).then(res => res.data).then(data => {
      console.log(data)
    }) */
    
    function getArticleById (id) {
      axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {id}}).then(res => res.data).then(data => {
        console.log(data)
      }).catch(err => {
        console.log(err)
      })
    }

    getArticleById(2)
 

四、18_axios請求(async)

<script src="./axios.min.js"></script>
  <script>
    /* axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {
      id: 1
    }}).then(res => res.data).then(data => {
      console.log(data)
    }) */
    
    async function getArticleById (id) {
      /* axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {id}}).then(res => res.data).then(data => {
        console.log(data)
      }).catch(err => {
        console.log(err)
      }) */

      try {
        const res = await axios.get('http://localhost/ajax/api/SelectArticleById.php', {params: {id}})  // 如果是await則本身promise就不需要寫後面then或catch

        // 對res進行處理即可
        console.log(res.data)
      } catch (err) {
        console.log(err)
      } 
    }

    getArticleById(5)