< 返回 Alpha Camp 全學期心得
這是我記錄自學程式，Alpha Camp 學期2-2的第一周心得。
回顧：Alpha Camp 學期 2-1 心得，打造一個會動的網頁
學期2-2是Alpha Camp第二學期的第二階段，目標是學會API，透過瀏覽器要資料。
本周的學習總結：
- 認識API
- 了解HTTP溝通協定
- 學習透過 Axios (背後技術是Ajax) 向API發出請求
認識API
API
API全名，Application Programming Interface，譯為「應用程式介面」。
API通常是由下列這些人寫好的程式。
- 營利單位(如Google Map API)
- 你的同事工程師
- 好心開源者 (遇到這種，我都先拜)
目的是：開放讓使用者(會寫程式的開發者)可透過API使用已經寫好的程式，不必再重複造輪子。
介面
視覺化的外觀，包住背後寫好的底層運作邏輯。
介面最重要功能就是：化繁為簡，讓使用者透過簡單的視覺介面，就能執行背後複雜的功能。
例如：房間的電燈開關就是最簡單的一種介面，只有開或關。而因為有了開關，即使我們不懂水電技術，也能輕易的達到「開關電燈」的功能。
Web API
由於學期二目的是做出能動的網頁，主要是使用 Web API (網路應用程式)，會透過網路收發API。
每一個API的使用方式由擁有者制定，方法大致相同，但細節可能不同。
Web API要達到的目的是：「在自己的網站裡，使用別人的資料」。
使用Web API時需要懂一些網路運作原理，因此需要了解 HTTP的收發流程原理。
HTTP
HTTP全名，HyperText Transfer Protocol，譯為「超文本傳輸協定」。
在網路的世界裡，人們使用 HTTP這種人類所制定的規則，作為機器間的溝通協定方式。
提出請求(request)的一方稱為客戶端 (client)，如：個別使用者
接受請求、給予資源(response)的一方稱為伺服器端 (server)，如：各個網站
透過客戶端request、伺服器端response的循環，完成各種網路上的資訊交換。
如：你現在使用的手機 or 電腦 (客戶端)，由URL (網址) 向益直玩 (伺服器端) request這篇文章的資訊。益直玩收到request後將文章內容response，你得以從裝置上看見文章。
我們可以在DevTools的Network中，查看到request/response的資訊
在發出請求時，會以 method表示動作，像上面提到取得這篇文章的method就是GET。
- GET
- POST
- PATCH
- PUT
- DELETE
Ajax & Axios
Ajax
Ajax全名， Asynchronous JavaScript and XML，非同步的JavaScript與XML請求資料技術。
透過Ajax 發出請求「非同步請求」，相較於「同步請求」，可更快速的處理資訊。
- 同步請求：需要線性處理需求，client發出request後，必須等到server response才能發送下個request
- 非同步同步：client發出request後，不需等server response，仍然可以繼續發送其他request。
如：FB運用Ajax技術，於是我們往下滑頁面時並不會重整頁面(F5)，而是轉圈圈後就追加載入新內容，提高使用體驗。
Axios
Axios是一個常用的發送請求(非同步)的工具，背後使用的就是Ajax技術。
而Axios本身是一個JavaScript函式庫，有三個重要功能：
- 多數瀏覽器都有支援
- 可支援 Node.js 從後端發送的 Http request
- 直接將回應的 JSON 資料轉換成 JavaScript 的 Object
透過axios發送 GET request：
axios.get('www.example.com/api/')
.then(function (response) {
// 1.handle success
console.log(response)
})
.catch(function (error) {
// 2.handle error
console.log(error)
})
.then(function () {
// 3.always executed (第二個.then為選擇性的)
})如此一來，透過 Axios 向其他第三方API發出請求，就能取得別人寫好的程式(資料)，加速開發時間。
< 返回 Alpha Camp 全學期心得
