學Node.js學到快放棄了嗎?看到一堆技術名詞就頭痛?別擔心,我也是這樣過來的!
當初我從Unity前端轉後端時,光是看到Promise、async/await這些英文術語就想逃跑。但其實搞懂之後發現,Node.js真的沒有想像中那麼難。
今天就用最白話的方式,帶你搞懂Node.js最重要的3個觀念。保證看完就能開始寫程式!
Node.js是什麼?為什麼這麼紅?
簡單說,Node.js就是讓JavaScript可以在電腦上跑的工具。
以前JavaScript只能在網頁瀏覽器裡面跑,現在有了Node.js,你就可以用JavaScript來寫後端程式、建網站、做API。
為什麼要學Node.js?
- 薪水比較高:後端工程師薪水通常比前端高1-2萬
- 工作機會多:很多公司都在用,像是Netflix、Uber都用Node.js
- 學習成本低:如果你已經會JavaScript,馬上就能上手
觀念1:箭頭函式 - 讓程式碼變簡潔的小技巧
以前的寫法 vs 現在的寫法
還在寫又臭又長的function嗎?來看看箭頭函式怎麼讓你的程式碼變簡潔:
// 老派寫法:看起來很冗長
function 計算總價(價格, 數量) {
return 價格 * 數量;
}
// 箭頭函式:一行搞定
const 計算總價 = (價格, 數量) => 價格 * 數量;
// 實際使用
const 商品 = [
{ 名稱: 'iPhone', 價格: 30000 },
{ 名稱: '筆電', 價格: 50000 },
{ 名稱: '耳機', 價格: 5000 }
];
// 用箭頭函式算出所有商品加稅後的價格
const 含稅價格 = 商品.map(item => ({
...item,
含稅價格: item.價格 * 1.05
}));
console.log(含稅價格);
實際開發時怎麼用?
在Node.js寫API的時候,箭頭函式超好用:
// 處理用戶登入的API
app.post('/login', (req, res) => {
const { 帳號, 密碼 } = req.body;
// 檢查帳號密碼...
if (帳號 === 'admin' && 密碼 === '123456') {
res.json({ 成功: true, 訊息: '登入成功!' });
} else {
res.json({ 成功: false, 訊息: '帳號或密碼錯誤' });
}
});
// 篩選活躍用戶
const 活躍用戶 = 用戶列表.filter(用戶 => 用戶.最後登入時間 > 七天前);
小提醒:箭頭函式的this行為跟一般函式不一樣,但在Node.js開發中通常不會遇到問題。
觀念2:Promise - 處理「等等再給你答案」的神器
Promise是什麼?
想像一下,你去飲料店點珍奶:
- 老闆說「等10分鐘」→ 這就是pending(處理中)
- 10分鐘後珍奶做好了 → 這就是fulfilled(成功)
- 結果材料用完做不了 → 這就是rejected(失敗)
Promise就是程式版的「等等給你答案」!
實際範例:模擬資料庫查詢
// 模擬從資料庫找用戶資料
const 找用戶資料 = (用戶ID) => {
return new Promise((成功, 失敗) => {
// 模擬資料庫查詢需要時間
setTimeout(() => {
if (用戶ID > 0) {
成功({
id: 用戶ID,
姓名: `使用者${用戶ID}`,
信箱: `user${用戶ID}@gmail.com`
});
} else {
失敗(new Error('用戶ID不能是負數啦!'));
}
}, 1000); // 等1秒
});
};
// 怎麼使用
找用戶資料(123)
.then(用戶資料 => {
console.log('找到用戶:', 用戶資料.姓名);
return 用戶資料.信箱; // 可以繼續處理
})
.then(信箱 => {
console.log('用戶信箱:', 信箱);
})
.catch(錯誤 => {
console.log('出錯了:', 錯誤.message);
});
真實情境:呼叫第三方API
// 模擬呼叫天氣API
const 查天氣 = (城市) => {
return new Promise((成功, 失敗) => {
// 模擬網路請求
setTimeout(() => {
const 天氣資料 = {
城市: 城市,
溫度: Math.floor(Math.random() * 20) + 15, // 15-35度
狀況: ['晴天', '多雲', '下雨'][Math.floor(Math.random() * 3)]
};
if (城市) {
成功(天氣資料);
} else {
失敗(new Error('請輸入城市名稱'));
}
}, 500);
});
};
// 使用方式
查天氣('台北')
.then(天氣 => {
console.log(`${天氣.城市}現在${天氣.溫度}度,${天氣.狀況}`);
})
.catch(錯誤 => {
console.log('查詢失敗:', 錯誤.message);
});
觀念3:Async/Await - 讓非同步程式碼看起來像正常程式碼
從Promise進化到Async/Await
Promise雖然好用,但是.then().catch()寫起來還是有點亂。Async/Await讓你的程式碼看起來就像平常寫程式一樣!
// 用Promise的寫法(比較亂)
const 處理用戶資料_舊版 = (用戶ID) => {
return 找用戶資料(用戶ID)
.then(用戶 => {
console.log('找到用戶:', 用戶.姓名);
return 找用戶文章(用戶.id);
})
.then(文章列表 => {
console.log('用戶有', 文章列表.length, '篇文章');
return 計算用戶分數(文章列表);
})
.then(分數 => {
console.log('用戶分數:', 分數);
})
.catch(錯誤 => {
console.log('處理失敗:', 錯誤.message);
});
};
// 用Async/Await的寫法(超清楚)
const 處理用戶資料_新版 = async (用戶ID) => {
try {
const 用戶 = await 找用戶資料(用戶ID);
console.log('找到用戶:', 用戶.姓名);
const 文章列表 = await 找用戶文章(用戶.id);
console.log('用戶有', 文章列表.length, '篇文章');
const 分數 = await 計算用戶分數(文章列表);
console.log('用戶分數:', 分數);
} catch (錯誤) {
console.log('處理失敗:', 錯誤.message);
}
};
實戰:建立一個簡單的用戶API
// 模擬資料庫操作
const 等一下 = (毫秒) => new Promise(resolve => setTimeout(resolve, 毫秒));
const 從資料庫找用戶 = async (id) => {
await 等一下(300); // 模擬資料庫查詢時間
return {
id,
姓名: `用戶${id}`,
信箱: `user${id}@test.com`,
註冊時間: '2024-01-01'
};
};
const 找用戶的文章 = async (用戶ID) => {
await 等一下(200);
return [
{ id: 1, 標題: '我的第一篇文章', 作者: 用戶ID },
{ id: 2, 標題: 'Node.js學習心得', 作者: 用戶ID }
];
};
// API處理函式
const 取得用戶完整資料 = async (req, res) => {
try {
const 用戶ID = req.params.id;
// 同時查詢用戶資料和文章(更快)
const [用戶資料, 文章列表] = await Promise.all([
從資料庫找用戶(用戶ID),
找用戶的文章(用戶ID)
]);
const 完整資料 = {
...用戶資料,
文章: 文章列表,
文章數量: 文章列表.length
};
res.json({
成功: true,
資料: 完整資料
});
} catch (錯誤) {
res.status(500).json({
成功: false,
錯誤訊息: 錯誤.message
});
}
};
現在就開始練習!
學會這3個觀念,你已經可以開始寫簡單的Node.js程式了!
建議練習步驟:
- 先把上面的程式碼複製下來跑跑看
- 試著改一些參數,看看結果會怎麼變
- 試著寫一個簡單的計算機API
- 如果覺得有興趣,可以考慮上課深入學習
推薦學習資源
想要系統化學習? 六角學院的Node.js課程真的不錯,我自己也是上這個課程學的。課程用中文教學,而且會帶你做實際的專案,不會只教理論。
小結
今天學了3個Node.js的核心觀念:
- 箭頭函式:讓程式碼變簡潔
- Promise:處理需要等待的操作
- Async/Await:讓非同步程式碼更好讀
這些都是寫Node.js每天會用到的基本功。搞懂這些,你就可以開始寫後端程式了!
下一篇文章我會教你時間控制和模組化,讓你的Node.js功力再升級。記得要實際動手練習喔,光看是學不會的!
想要更完整的學習?查看六角學院Node.js課程開始你的後端之旅!
