接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下
ajax
ajax 用法有點麻煩，要先引入 jQuery，用法如下
ajax 比起 axios 較為笨重也較不安全


學習

職場產業

音樂藝文

ajax

fetch

installation

用法

axios

<div class="draft-block draft--p left">接下來要講前後端怎麼溝通，最常見應該都是用 <span style="font-weight: bold; ">axios</span>, <span style="font-weight: bold; ">ajax</span> 或 <span style="font-weight: bold; ">fetch</span> 來 call api。先講結論，個人推薦使用 <span style="font-weight: bold; ">axios</span>，那他們又有什麼優缺點呢？讓我簡單講解一下</div>
<h2 class="draft-block draft--h2" name="header-49rer">ajax</h2>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">ajax</span> 用法有點麻煩，要先引入 <span style="font-weight: bold; ">jQuery</span>，用法如下</div>
<div class="embed-block-prerender" data-type="gist" data-id="562e1d40dc8c5b1f94b094c5b2987525"></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">ajax</span> 比起 <span style="font-weight: bold; ">axios</span> 較為笨重也較不安全</div>
<h2 class="draft-block draft--h2" name="header-144g8">fetch</h2>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">fetch</span> 是為了取代 <span style="font-weight: bold; ">ajax</span>，用法如下</div>
<div class="embed-block-prerender" data-type="gist" data-id="4d42fbb9b01da288341eb7e9b046799a"></div>
<div class="draft-block draft--p left">call 完 api 需要先將 response 用 <span style="font-weight: bold; ">.json</span> 轉換成 json 格式，然後再用下一個 <span style="font-weight: bold; ">then</span> 取用 data，我是覺得有點囉唆</div>
<h2 class="draft-block draft--h2" name="header-f7h3h">axios</h2>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">axios</span> 是以上幾種方法中最新的方法，輕量、快速、安全，語法也最簡單</div>
<h3 class="draft-block draft--h3" name="header-8hqj1">installation</h3>
<div class="draft-block draft--p left">我們使用 <span style="font-weight: bold; ">pnpm</span> 來安裝</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">pnpm install axios</pre></pre>
<h3 class="draft-block draft--h3" name="header-8ktgg">用法</h3>
<div class="draft-block draft--p left">舉個例子</div>
<div class="embed-block-prerender" data-type="gist" data-id="e798d8af0b94fb19eb358d883e965c5b"></div>
<ul>
  <li class="draft-block draft--li"><span style="font-weight: bold; ">then</span> 是如果這支 api 呼叫成功，接下來要做什麼事</li>
  <li class="draft-block draft--li"><span style="font-weight: bold; ">catch</span> 是如果這支 api 呼叫失敗，接下來要做什麼事</li>
  <li class="draft-block draft--li"><span style="font-weight: bold; ">finally</span> 是如果不論這支 api 呼叫成功或失敗，都會執行</li>
</ul>
<div class="draft-block draft--p left"></div>

前端和後端溝通，最常用就是 get 和 post
後端
先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api
function1 內的第一個參數是前端的 request，之後第二個參數第三個參數可以隨便你設，這倒是沒有限制
用 request.GET 這個

[14] 用 GET 串起前後端

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

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

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

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

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

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

then 是如果這支 api 呼叫成功，接下來要做什麼事

catch 是如果這支 api 呼叫失敗，接下來要做什麼事

finally 是如果不論這支 api 呼叫成功或失敗，都會執行

Create app
django 的架構是這樣的，在專案底下有 app，你的 api 會寫在 app 底下，這樣好處就是可以分門別類，不同功能寫在不同 app 內
建立 app 的指令如下
比方說我建立了一個 app 叫 app，那專案內就會多了個 app 路徑
settings.py
把這個 a

付費限定文章
[13] Compare axios, ajax, fetch

ajax

fetch

axios

installation

用法

以行動支持創作者！付費即可解鎖

付費限定文章[13] Compare axios, ajax, fetch

ajax

fetch

axios

installation

用法

以行動支持創作者！付費即可解鎖

付費限定文章
[13] Compare axios, ajax, fetch