# 第八週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`

## 什麼是 API?

## :dart: 四種 API 種類
- 可在瀏覽器讀取使用，不用申請帳號
- 可在瀏覽器讀取使用，需要申請帳號、拿金鑰
- 只能在`後端伺服器`使用資料，不需申請帳號
(透過 node.js 寫後端伺服器，資料抓來先存後端，再從自己的後端抓資料到前端：優點是可節省流量)
- 只能在`後端伺服器`使用，需要申請帳號獲得金鑰

> 兩種觀察 API 能否直接抓取的方法：
> 1. response headers：Access-Control-Allow-Origin: *
> 2. 用 test-cors 觀察是否能介接

## :dart: API test-cors [網址](https://www.test-cors.org/)
### Fired XHR event: error :negative_squared_cross_mark:
代表不能透過瀏覽器直接使用資料。

### XHR status: 200 :heavy_check_mark:
代表 `可以` 直接透過瀏覽器使用資料。


## :dart: 狀態碼 (伺服器回傳)
- **200 正常** (正常狀態回傳的訊息，由 `then` 取得)
- **404 錯誤** (異常狀態回傳的訊息，由 `catch` 取得)

## :dart: axios get/post/put/delete

- **get**：針對一個網址資源，發出 get 請求，取得資料庫內的資料。
- **post**：針對一個網址資源，發出 post 請求，若該網址有支援 post 請求，則就能進行資料儲存到資料庫的程序。（資料要按照後端格式製作）
- **delete**：針對一個網址資源，發出 delete 請求，若該網址有支援 delete 請求，則刪除資料庫內的資料後，回傳一個空陣列。


## :dart: headers 資訊
### 查看 Headers
- 打開 dev tool
- 查詢 network
- 任選一個 Name 視窗的檔案
- 即可查詢 response headers 或 request headers


### request headers: 發出請求的資訊:
- 通常會在這邊埋入開發者的身份驗證資訊。
- 若伺服器在資料庫驗證身份資料，確認無誤，就會回傳你要求的資料。