Middleware 實作練習與 moment.js 處理時間格式
本篇文章是記錄自己為了印出伺服器接收請求、回應請求的時間時，研究 JS Date 物件與第三方套件 momoent.js 的心得。
一、如何取得時間、以及印出淺顯易懂的時間格式？
雖然順利透過取得 http request 的方法以及網址，但還有幾個問題尚待解決，也就是如何取得目前的時間，然後以下列的格式印出？
2019-5-17 18:51:12 | GET from /為了印出伺服器接受請求的時間，必須先取得目前的時間參數，最迅速的方式便是使用下列的方式取得 UNIX 碼。
const requestUnixTime = Date.now()
console.log(requestUnixTime) // 1626510099190印出變數的值後，會看到一串意義不明的數字，這就是剛才透過 Date.now() 取得的 UNIX 碼。
然而，究竟什麼是 UNIX 碼？ 依據維基百科的說法，UNIX 時間即是「自 1970 年 1 月 1 日 0 時 0 分 0 秒以來的總秒數」。
但我們必須要將這些秒數轉換為比較容易理解的時間格式，所幸 JS 的 Date 物件可以將 UNIX 碼轉換為 Timestamp (時間戳記)，所以我們可以使用以下方式取得時間戳記。
const requestTimestamp = new Date(requestUnixTime)
console.log(requestTimestamp) // 2021-07-17T08:21:39.251Z好的，稍微看得懂了，至少年、月、日已經出來了，但還有一些問題尚待解決。
首先是 T / Z 等我們不需要的字串混在其中，而且時間似乎也不是我們現處的時區，需要透過一些方式轉換。
JS 的 Date() 物件提供了不少方法，例如 Date.prototype.toLocaleString(‘zh-TW’) 取得台北時區的時間格式，但依然與題目要求的格式有些差異，需要對取得的參數作後續處理，導致程式碼出現一大堆時間相關的變數，光是要想出避免混淆的命名就讓我十分苦惱，所以我想要一個可以一勞永逸解決的方法，也因此發現了一個十分好用的第三方套件： moment.js
二、moment.js 的使用方式
- 基本設置
首先，下載 moment.js 至專案中。
npm i moment緊接著，在需要使用 moment 套件的檔案引入
const moment = require('moment')我們可以透過 moment.js 的官方文件範例，來理解這個套件是如何運作的
moment().format('MMMM Do YYYY, h:mm:ss a') // July 17th 2021, 4:53:44 pm- 呼叫 moment() 可以直接取得 UNIX 碼，效果等同於 moment(Date.now())
- moment() 可以傳入 UNIX 或字串參數，如果傳入的是字串，moment() 會判斷該字串是否符合 ISO 8601 的時間格式
- 串接 .format() ，它會將時間轉化成符合代入參數的時間格式
- 另外，依據 moment 官方文件敘述，moment() 會自動將傳入的時間參數轉換為目前的時區
2. 常見參數說明
- YYYY / YY : 表示年份，前者為四位數，後者為兩位數，例如 2021 / 21
- MMMM / MM：表示月份，前者為月份的名字，後者為數字，例如 July / 7
- DD : 表示日期，1～31
- DO : 加上日期在月份中的序數，16th
- HH : 24 小時制
- hh : 12 小時制，通常會搭配 a ，再後面加上 am / pm
- mm : 分鐘
- ss : 秒
- Z : 時區，例如 +08:00
因此，參考題目要求的時間格式後，我將印出時間的相關程式碼整理為下列形式
// request
const requestUnixTime = Date.now()
const requestTimeLog = moment(requestUnixTime).format('YYYY-MM-DD HH:mm:ss')
// response
const responseUnixTime = Date.now()
const responseTimeLog = moment(responseUnixTime).format('YYYY-MM-DD HH:mm:ss')
const handleDuration = responseUnixTime - requestUnixTime最初是使用 Date 物件的內建方法，必須分別處理日期和時間，轉換 12 小時制為 24 小時制，再將這些處理完的時間重新拼裝起來。
透過 moment 的協助，原本多達十幾行的程式碼如今只要五行就搞定，看起來清爽多了。
