學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程式了!

建議練習步驟

  1. 先把上面的程式碼複製下來跑跑看
  2. 試著改一些參數,看看結果會怎麼變
  3. 試著寫一個簡單的計算機API
  4. 如果覺得有興趣,可以考慮上課深入學習

推薦學習資源

想要系統化學習? 六角學院的Node.js課程真的不錯,我自己也是上這個課程學的。課程用中文教學,而且會帶你做實際的專案,不會只教理論。

小結

今天學了3個Node.js的核心觀念:

  1. 箭頭函式:讓程式碼變簡潔
  2. Promise:處理需要等待的操作
  3. Async/Await:讓非同步程式碼更好讀

這些都是寫Node.js每天會用到的基本功。搞懂這些,你就可以開始寫後端程式了!

下一篇文章我會教你時間控制和模組化,讓你的Node.js功力再升級。記得要實際動手練習喔,光看是學不會的!


想要更完整的學習?查看六角學院Node.js課程開始你的後端之旅!

文章標籤
全站熱搜
創作者介紹
創作者 傑克的遊戲宇宙 的頭像
傑克的遊戲宇宙

傑克淺談遊戲邏輯

傑克的遊戲宇宙 發表在 痞客邦 留言(0) 人氣(85)