Node.js系列 ：5個方法產生非同步Http 請求
作為我的第一篇 Post，就從 Node.js 開始吧！
相信各位在寫程式時都避不開一個問題：大量的 Http Request！在存取任何型態的遠端資源 ( API、網頁、File…… )時都會用到。而到底有哪些模組在Node.js 中可以用來達成目標呢 ？我們往下看吧！
以下分享為了簡潔以及易於理解，本文皆使用 GET 請求來說明。
你將學到
- 如何用不同的 modules 發出Http請求
- 每一個 module 的優缺點
閱讀需求
- 建議對 Javascript 和 ES6 語法有基本的了解
- 實際在 Local 安裝 Node.js 7.6.0以上
建置專案
創建一個空的資料夾並且用 npm 初始化它
mkdir test && cd $_ npm init -y
Node.js 中有兩種簡明的模式可以產生 Http 請求：
- 經典的 callback pattern
- (用多了會導致著名的 callback hell，非常難維護！)
- 支援 Promises，代表可以使用 async/await
- (Promises 觀念非常重要，不懂的建議先從下方連結理解喔)
https://developers.google.com/web/fundamentals/primers/promises?hl=zh-tw
我們就從 callback 開始吧！
1. http.get 和 https.get
第一個選擇就是 Node.js 內建原生的 http.get 和 https.get，如果只是要做非常單純的 GET 請求，可以用他們就好。
優點：
- 原生 API ，不用額外安裝 module
- 回應是串流所以需要較多的手工處理
- (優點也是缺點，但我覺得可以多學點也是個優點？)
缺點：
- 會多寫很多 code，之後可能很難維護
- 同第二個優點
- 沒有支援 Promises
範例 http-native.js：
const https = require("https");
const url = "https://api.jasontechlab.com/posts/1";
https.get(url, res => {
res.setEncoding("utf8");
let body = "";
//接收資料
res.on("data", data => {
body += data;
});
//接收完畢
res.on("end", () => {
body = JSON.parse(body);
console.log(body);
});
});
接下來執行：
node http-native.js
結果：
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}
http.get 中第一個參數是網址 url ，第二個參數是一個 callback res。
res是一個 http.ClientRequest 物件，這意味著你如果要對 response body 進行操作，則必須聽取一些事件，請看範例中res.on() 的部分，在範例中我只是簡單的 console.log 出 API 回傳的資料，實務上應該會有更複雜的操作或是將資料傳入一個 callback function：
function makeResponseHandler (callback) {
return function (response) {
//在這處理 data, node.js native wahy
callback(null, result);
}
};
return {
apiGet: function(url, callback) {
http.get(url, makeResponseHandler(callback));
}
}
小結：
callback模式還有一個 request module ，但是在今年二月已經被廢棄了，有興趣的可以去官網看看：
https://www.npmjs.com/package/request
用原生的方法雖然會多寫很多 code，但是你因為被迫於處理原生的 events，
會去多鑽一些 Node.js的底層，我覺得這是好事，推薦初學者使用！
接下來要學的可以用一句話代表：I Promise I’ll be async ！
2. node-fetch
node-fetch 是 Fetch API 在 Node.js 中的實作，基本上跟 window.fetch 相同，所以基本上使用起來也是非常直覺。
優點：
- 支援 Promises
- 使用上接近 window.fetch
- 依賴很少
缺點：
- 不支持同步請求
- 只會對網路報錯，對 400, 500 等都當作是成功的請求，需要封裝處理
- 默認不會带 cookie，需要添加額外配置
- 不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制不能阻止請求過程繼續在後台執行，造成了流量浪費
- 沒有辦法原生的監測請求進度
安裝：
npm i node-fetch --save
範例 node-fetch.js：
const fetch = require("node-fetch");
const url = "https://jsonplaceholder.typicode.com/posts/1";
const getData = async url => {
try {
const response = await fetch(url);
const json = await response.json();
console.log(json);
} catch (error) {
console.log(error);
}
};
getData(url);
執行：
node node-fetch.js
小結：
我本身不是很愛用 node-fetch，因為我不愛 Fetch API所以也不愛它ＸＤ，想到處理回傳時要寫 json() 和兩次 then() 就覺得很煩，不過每人都有所愛，選擇自己適合的最重要。
3. r2
request module 的作者在2017年開發的，也算是 Fetch API的另一個實作，這意味者：r2 底層是 node-fetch……
優缺點同 node-fetch
安裝：
npm i r2
範例 r2.js：
const r2 = require("r2");
const url = "https://jsonplaceholder.typicode.com/posts/1";
const getData = async url => {
try {
const response = await r2(url).json;
console.log(response);
} catch (error) {
console.log(error);
}
};
getData(url);
執行：
node r2.js
小結：
我承認我沒有花時間去研究它(因為本來就對 node-fetch有排斥了)，但有興趣的可以去看看它新增的特性以及改良的地方，搞不好你會喜歡。
4. axios
axios 是現在超流行的 module，也是我最常使用的。它天生就支援了 Promises所以 code 寫起來非常簡潔。
axios 被拿來使用在前後端都可以，而且可以針對 response 自動轉換，不需要像 node-fetch 一樣寫 json() 啦！
優點：
- 支援Promises
- 使用容易簡明
- 只有兩個依賴
缺點：
- ？？ (有知道的可以跟我說)
安裝：
npm i axios
範例 axios-module.js：
const axios = require("axios");
const url = "https://jsonplaceholder.typicode.com/posts/1";
const getData = async url => {
try {
const response = await axios.get(url);
const data = response.data;
console.log(data);
} catch (error) {
console.log(error);
}
};
getData(url);
執行：
node axios-module.js
小結：
目前我找不太到 axios 缺點，他是如此的易用跟方便配置，或許等以後 Fetch 技術成熟到可以取代 Ajax 時的那一天才有可能找到吧。
總結：
通過以上簡易的比較，大家都可以試試，目前還是最推薦使用 axios。我最近有關注一個後起之秀 bent，它用起來比 axios 更為簡潔，大家有興趣可以去嘗試一下：
https://github.com/mikeal/bent