學習怎麼接 api 可以說是在學習 WEB 前端技術之路上一個很重要的里程碑，最一開始我是藉由 jQuery 的 $.ajax() 來接 api 的，但在過程中遇到太多自己不懂的東西，又不懂「接api」這件事底層到底怎麼運行的情況下，決定在學習 JS30 的過程中，循著 我每天都接一個api 的腳步，盡可能每天都接一個 api 來讓自己熟悉這件事。
來快速回顧一下我的學習之路吧！
要先知道
API
- API全名叫做 「Application Programming Interface」
- 中文叫做「應用程式介面」
- 通常在寫網頁的時候，我們都會直接講 API，但其實我們指的是 Web API
- 程式跟程式之間的串接的一套標準
Ajax
- 全名是「Asynchronous JavaScript and XML」
- 重點在於Asynchronous這個單字，「非同步」
- 『非同步的 建立一個XML(XHR)物件，打開網址然後送出要求，最後由回調函式處理伺服器傳回的Response(回應)』的一門技術。
XMLHttpRequest
這可以說是我在 我每天都接一個api 的過程中用到最多的一種方式，他可以說是 JS 最一開始接 api 的一種技術，個人滿喜歡胡立大大的這篇文章：輕鬆理解 Ajax 與跨來源請求，裡面詳細說明了許多會需要用到的技術，與最一開始用 WEB 接 api 會遇到的網頁問題。
// ㄧ個基礎的XMLHttpRequest物件如下
function makeARequest(){
// 建立一個新 XHR Object
var xhr = new XMLHttpRequest();
// 用.open() method 開始一個 request
// 必須傳入兩個參數，第一個是 HTTP method，第二個是 request 要傳向的目的地 url
// 也就是放你得到的 api url 的地方
xhr.open("GET", "http://www.example.org/example.txt");
// 當 request 成功完成之後，會執行的 callback
xhr.onload() = function(){
// Do something with the retrieved data
};
// 送出 request
xhr.send();
}jQuery ajax
這就是我最一開始在接 api 的方式，不得不說原生越學越久，其實也越能理解為何 jQuery 會曾經紅極一時，他真的簡化了很多步驟跟複雜的手續阿！但無奈如此方便的技術真的讓當初剛開始學習的我一頭霧水，也不能理解他幫助了我哪些事情，所以我也打算在我的學習之路上逐漸淘汰他了，但為了紀念我也還是把他放上來，畢竟這是我最一開始接 api 的方式。
var request = $.ajax({
url: "http://www.example.org/example.txt",
method: "POST",
data: { id : menuId },
dataType: "html"
})
.done(function( msg ) {
// Do something with the retrieved data
});method
定義 request 的類型：如 GET、POST。
headers
{
Accept: "application/json; charset=utf-8",
"Content-Type": "application/json; charset=utf-8"
}application/json倒底是啥？他是一個 MIME type，也就是「内容類型」（content type），是一種用於標示文件類型、描述內容的隨附文件發送的標識字符串。UTF-8是一種針對 Unicode 的可變長度字元編碼。- Accept 告訴伺服器 用戶端可解讀的內容類型。
- Content-Type 告訴後端服務器實際發送的數據類型。
body
- JSON.stringify 將一個 JavaScript 值轉換為一個 JSON 字符串
基本上這樣就可以成功發 api 出去了，那成功送出去之後，那時候與我配合的後端問了我一個問題：啊你有收到我的 response 嗎？
：蛤？
fetch的回應
MDN 這樣寫 fetch 的返回值
一個 Promise？那是啥？Promise是一個物件，有三種狀態，等待中（pending）、完成（resolve or fulfilled）跟失敗（reject）
- 非同步操作的最終完成 fulfilled (或失敗 rejected ),及其結果值.
- 分為 resolve 和 reject 兩個參數
- 呈現了對一次請求的回應數據。
.then
之後會看到我在裡面寫這樣：
.then(response => {
result= Promise.resolve(response.json());
})p.then(function(value) {
// 當 Promise 被實現（fulfilled）時呼叫此函式。
});- 返回一個被解析為 JSON 格式的 promise 對象
- 回傳一個以 value 判定結果的 Promise 物件。
- value？JS中的 Array、Object 等等…都是 value 啦~
.then(response => {
result = Promise.resolve(response.json());
})所以以上整段的意思就是：
我定義一個變數 result 來儲存
『我用 value 的方式來顯示 被非同步請求成功回傳 且被解析為 JSON 格式的結果』
.then的回傳值
要注意的是 .then的回傳值 是 擱置狀態的Promise，是一個可以被轉換為一個操作成功（fulfilled）的狀態或是操作失敗（rejected）的狀態。
要去注意 Promise 狀態（PromiseStatus），要是已經 操作成功（fulfilled）的狀態或是操作失敗（rejected）的狀態，才可以接續著做函式操作唷。
這大概就是我目前對「接 API」這件事全部的了解，對網頁的規範與限制還不夠了解，對 Promise 與非同步也還有可以進步的地方，我將會繼續成長繼續學習囉！
