接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下

ajax

ajax 用法有點麻煩，要先引入 jQuery，用法如下

$.ajax({
    type: "GET",
    url: 'url',
    dataType: "json",
    success: function (response) {
      console.log(response)
    }
  });

ajax 比起 axios 較為笨重也較不安全

fetch

fetch 是為了取代 ajax，用法如下

fetch('url')
.then((response) => response.json())
.then((data) => console.log(data))

call 完 api 需要先將 response 用 .json 轉換成 json 格式，然後再用下一個 then 取用 data，我是覺得有點囉唆

axios

axios 是以上幾種方法中最新的方法，輕量、快速、安全，語法也最簡單

installation

我們使用 pnpm 來安裝

pnpm install axios

用法

舉個例子

axios.get('url')
.then(res=>{console.log(res.data)})
.catch(err=>{console.log(err)})
.finally(()=>{})

• then 是如果這支 api 呼叫成功，接下來要做什麼事
• catch 是如果這支 api 呼叫失敗，接下來要做什麼事
• finally 是如果不論這支 api 呼叫成功或失敗，都會執行

接下來的篇章會介紹前後端如何用 get 和 post 溝通