# 🏅 DAY29 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

HTTP 狀態碼教學
---
學會看 HTTP 狀態碼是寫網頁很重要的一個能力，狀態碼所代表的訊息可以讓我們了解一個 HTTP 請求是否已經被完成。同學可以參考 [這篇文章](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status) 深入了解狀態碼的種類。

這邊替大家整理一些使用 AJAX 比較常遇到、需要了解的狀態碼訊息:

1. **成功回應 (Successful responses, 200–299)**
這區間的狀態碼表示伺服器有成功接收到用戶端要求。以 AJAX 的串接為例，如果回傳的 **status 為 200**，則代表有成功接收到資料。

2. **用戶端錯誤 (Client errors, 400–499)**
這區間的狀態碼表示有錯誤發生，且錯誤來自於「用戶端」。以 AJAX 的串接為例，
* 回傳的 **status 為 400**，表示遠端伺服器接收到無效語法、無法理解請求，因此需要檢查程式碼有無寫錯的地方。
* 回傳的 **status 為 403**, 表示禁止使用，這代表用戶端沒有訪問權限，因此沒辦法成功串接資料。
* 回傳的 **status 404**，表示找不到檔案資料。

3. **伺服器端錯誤 (Server errors, 500–599)**
如果發生狀態碼為 **5xx** 的錯誤，則表示錯誤發生跟「遠端伺服器」有關，此時就需要跟後端工程師進行協調了。

問題
---
> 題目一: 在使用 axios 串接 API 的時候，如果 HTTP 狀態碼顯示為 403，則代表有成功接收到資料，請問是正確還是錯誤? 如果答案為錯誤，則狀態碼 403 代表什麼訊息，以及成功接收到資料的 HTTP 狀態碼應該為何?
>
> 題目二: 請問「用戶端錯誤」以及「伺服器端錯誤」的 HTTP 狀態碼各自位於哪個數字區間? 可否各自舉一個例子說明?

回報流程
---
將答案寫在 CodePen 並複製 CodePen 連結貼至 thread 中回報就算完成了喔! 解答請參考下圖（需打開程式碼的部分觀看）


<!-- 解答
題目一: 錯誤，狀態碼 403 代表發生錯誤，表示用戶端沒有訪問權限。成功串接資料的狀態碼回應應該為 status 200。

題目二: 「用戶端錯誤」的區間為 400–499，「伺服器端錯誤」的區間為 500–599

舉例:
* 400 -「用戶端錯誤」，表示發送的語法無效，應該檢查程式碼。
* 500 - 「伺服器端錯誤」，表示伺服器端發生未知或無法處理的錯誤。
-->

| Slack | CodePen |
|:----------------:|:-------------------:|
| Karen Huang | https://codepen.io/Coding_Snorlax/pen/PoKyMYr |
| Iris Huang | https://codepen.io/ythuang/pen/JjyxYmR |
|CloThEs| https://codepen.io/bogwdnxx-the-sans/pen/NWvoGoe|
| YC | https://codepen.io/YCLu/pen/OJjdyaE |
|POPEYE |https://codepen.io/popeye_ux/pen/rNzPOEO |
|Cheng pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
| Sam | https://codepen.io/sam-hsu/pen/VwzgvJM |
|Genos|https://codepen.io/pb220416/pen/vYJbLER|
| Bella Shya | https://codepen.io/BellaXie/pen/ZEJwbgG?editors=0010 |
|BeanHuang|https://codepen.io/Beanhuang/pen/gOxqPMB|
|Bonnie|https://codepen.io/bonnieli1414/pen/vYJbNqp |
|Aaron Tu|https://codepen.io/aarontu/pen/BadMoXG|
|米米|https://codepen.io/Jameshsu0407/pen/GRvzoyz?editors=0010|
| Jun Ting Lin | https://codepen.io/jake1155/pen/BadMjJg |
| Gill | https://codepen.io/Gill-Chin/pen/Vwzgebx?editors=0010 |
Tim Lin|https://codepen.io/TimmyLin/pen/vYJbLaQ?editors=1010|
| Riley | https://codepen.io/jjpxbprd/pen/QWMYyJy |
| Elaine Liu | https://codepen.io/elaine7598/pen/NWvoxyW?editors=1010 |
| 傅劍軒 | https://codepen.io/seonkuraito/pen/vYJbGEw?editors=0010 |
| Yunei | https://codepen.io/Yunei/pen/VwzgajN |
|kk|https://codepen.io/potatokaka/pen/bGrzppe?editors=0010|
| 劉維倫 | https://codepen.io/lun0223/pen/PoKVNpP?editors=0010 |
|lumei|https://codepen.io/l_umei/pen/zYdeqjM|
|有廖先生(Rain)|https://codepen.io/billpop741/pen/mdMvPEb|
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/GRvzZbN?editors=0010|
|Jasper|https://codepen.io/li-jasper/pen/MWvLexg |
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/YzxBGwe |
| Lai | https://codepen.io/co_lai/pen/LYjqRbO?editors=1010 |
| 陳暐中 | https://codepen.io/wei-z/pen/LYjqbOv?editors=0010 |
|阿和|https://codepen.io/shnny/pen/WNEPRwz|
|Louis|https://codepen.io/Louis164156/pen/OJjdWRx?editors=1010|
| Kelvin Hsu | https://codepen.io/kelvin001/pen/OJjdWJg?editors=0010 |
|大衛|https://codepen.io/exnsrpjc/pen/gOxqPeE|
|Gui|https://codepen.io/guitimliu/pen/qBXgjQa|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/XWaOVbd?editors=0010 |
| ZOE WU | https://codepen.io/Zoechiueh/pen/zYdeRMM?editors=0010 |
| Jocelyn | https://codepen.io/enjoyful/pen/ExvMayy?editors=0010|
| Steven Chan | https://codepen.io/Steven1220/pen/rNzRVgZ |
|鄭安志|https://codepen.io/lwmtsgek/pen/porYjza?editors=0010|
|張喆|https://codepen.io/wow767t/pen/MWvxazR?editors=0010|
|ZY Hsu|https://codepen.io/zihyin/pen/JjyzNjp?editors=0011|
|鉦勝|https://codepen.io/atckmax823/pen/OJjqojo?editors=1011|
|AKI|https://codepen.io/akichen27/pen/rNzRoJx|
|雪莉|https://codepen.io/utshang216/pen/qBXvzaG|
|danny123| https://codepen.io/binlandz123/pen/zYdXBOL?editors=1000 |
| YuriT | https://codepen.io/wenfisht/pen/bGrZNPG |
|Sandy|https://codepen.io/Sandy_L/pen/rNzbXjE?editors=1011|
|LTL|https://codepen.io/ltlin93/pen/zYdQNRm?editors=0010|
|kailun|https://codepen.io/Kailun/pen/abyrJog|
|小K|https://codepen.io/kelen1995/pen/MWvMEBK||
|傑瑞|https://codepen.io/auatwood909815/pen/GRvbwvb?editors=0010|
|艾瑞克|https://codepen.io/ericla/pen/eYEqpWW?editors=0010|
|許閔翔|https://codepen.io/oupbzfxq-the-scripter/pen/zYdgQmr|
paul|https://codepen.io/printfootya/pen/ExwYzMV?editors=1010|
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/LYzYmLJ?editors=0010|
|Hamaji| https://codepen.io/hamajibashi/pen/gOGbWXw |
|YOYO| https://codepen.io/lumedkle/pen/ExwaBbj?editors=0010 |
|Jie Du| https://codepen.io/qgqonost-the-flexboxer/pen/poWJJZL?editors=0010 |
|Jeff|https://codepen.io/jeff-cheng/pen/PoJPLXJ?editors=0010|
|Clara|https://codepen.io/ClaraChen/pen/vYeGvVZ?editors=1011|
| Aya | https://codepen.io/NoNameNote/pen/xxXOPPJ |
|Zooey Cheng| https://codepen.io/noraneko0430/pen/ZEXBPbY?editors=1000|