筆記 JavaScript 工程師養成直播班 第六堂

1.HTTP 回應狀態碼

資訊回應（100——199）
成功回應（200——299）
重新導向訊息（300——399）
用戶端錯誤回應（400——499）
伺服器錯誤回應（500——599）

2.常見回應狀態碼

200 OK
請求成功。「成功」的結果含義取決於 HTTP 方法：
GET：資源已被擷取並在訊息主體中傳送。
Headers：回應中包含表示標頭，但沒有任何訊息主體。

PUT 或 POST：描述操作結果的資源在訊息主體中傳送。
TRACE：訊息主體包含了伺服器接收到的請求訊息。

304 Not Modified
記憶體有快取未被修改

404 Not Found
只不到網頁

500 Internal Server Error
後端程式有問題

3.request(請求)

Clinet > Server > DB
request header content-type:解析格式
request data

3.reponse(回傳)

DB > Server > Clinet
response header content-type:解析格式
response data

4.Javascript 原生寫法

1.XMLhttpRequest
2.Fetch

5.axios(底層用XMLhttpRequest)

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

6.同步、非同步

同步:順序性執行A -> B -> C
非同步:同時執行不會卡住，網路請求、計時器、檔案讀取，處裡須等待佳
A ->
B ->
C ->

7.處理非同步問題

非同步不會等待，所以有可能沒有資料時就跑下面的js，處理方式可以包在函式中

8.HTTP Method

get 獲取
post 新增
delete 刪除
put 更新
patch 修改一部分

差別除Get以外其他可傳送資料給伺服器

9.傳遞資料正確API才有用

傳送
1.Method
2.URL
3.資料正確
接收
1.看規格

10.常用的資料請求格式Content-Type:

1.application/x-www-form-urlencoded form表單
2.application/json JSON
3.multipart/form-data 檔案、圖片、影片
4.text/plain 純文字

11.axios.get

	console.log(axios);//可以看看有沒有載入成功
	axios.get('網址')
	.then(function (response) {
		console.log(response);
	})
	.catch(function (error) {
		console.log(error);
	})
	.finally(function () {
		// 均會執行
	});

12.開發除錯概念

POST網址可能會跑兩次 
F12開發工具 > NetWork > preflight-先驗證是否為跨網域 > xhr-可跨網域才送出請求 
F12開發工具 > NetWork > 網頁 > Headers 傳送的狀態
F12開發工具 > NetWork > 網頁 > Payloads 傳送的資料
F12開發工具 > NetWork > 網頁 > Response 回傳的資料

13.直播補充

舊方式:Form
缺點:整頁刷新 > 中斷使用者操作 > 短暫空白

新方式:AJAX
支援非同步機制 > 頁面局部更新 > 不必重整整個頁面 
伺服器回傳資料 > 不會轉址 > 決定可更新哪個畫面
優點:減少data傳輸，載入速度，使用者操作更順暢
缺點:無法預期完成順序

一定走非同步:均須等待時
1.網路請求
2.計時器 setTimeout(function(){},1000);
3.檔案讀取

參考來源
六角學院直播課
HTTP 回應狀態碼