Middleware Pertamamu

Termasuk bagian Dasar-Dasar Express dalam perjalanan Node.js di Coddy. Pelajaran 13 dari 23.

Beberapa pekerjaan berlaku untuk setiap permintaan, seperti menulis satu baris ke log. Menyalin pekerjaan itu ke setiap rute tidak akan ada habisnya. Setiap permintaan memiliki method di req.method: GET untuk mengambil sesuatu, POST untuk mengirim sesuatu.

let visits = 0;

app.use((req, res, next) => {
    visits++;
    next();
});

Fungsi yang diberikan ke app.use disebut middleware: Express menjalankannya untuk setiap permintaan, sesuai urutan penambahannya, sebelum rute-rute di bawahnya. Fungsi ini menerima argumen ketiga, yaitu next. Memanggil next() meneruskan permintaan ke proses berikutnya. Middleware yang tidak memberikan jawaban maupun memanggil next() akan membuat permintaan menunggu selamanya.

express.static dari bab sebelumnya juga merupakan middleware: middleware ini memberikan jawaban saat menemukan file dan memanggil next() saat tidak menemukannya.

Tantangan

Mudah

Kamu ingin menampilkan satu baris log untuk setiap permintaan yang diterima server-mu, agar kamu bisa melihat apa yang diminta pengunjung.

Di server.js, tepat setelah const app = express();, tambahkan middleware dengan app.use. Karena diletakkan di sana, middleware ini berjalan sebelum setiap rute.
Untuk setiap permintaan, middleware ini mencetak satu baris ke Console: method permintaan, spasi, lalu path-nya. Permintaan ke /recipes/2 mencetak GET /recipes/2. Method ada di req.method (GET, POST, dan seterusnya), sedangkan path ada di req.url.
Setelah mencetaknya, middleware ini memanggil next(), sehingga permintaan diteruskan ke rute.

Coba: Tekan Jalankan dan kirim permintaan ke /recipes/2. Kamu akan melihat Pancakes, dan Console menampilkan GET /recipes/2. Kirim permintaan ke /api/recipes: list seperti biasa, dan GET /api/recipes di Console. Kirim permintaan ke /nope: hasil 404, dan Console tetap menampilkan GET /nope, karena middleware berjalan sebelum Express mencari rute.

Coba sendiri

import { escapeHtml } from './html.js';
import express from 'express';
import { recipes } from './data.js';

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<link rel="stylesheet" href="/style.css"><h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text') mengirim teks biasa, sehingga setiap judul muncul di baris tersendiri.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/api/recipes', (req, res) => {
    res.json(recipes);
});

app.get('/api/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).json({ error: 'No such recipe' });
        return;
    }
    res.json(recipe);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.get('/menu', (req, res) => {
    res.redirect(301, '/recipes');
});

app.get('/menu/:id', (req, res) => {
    res.redirect(301, `/recipes/${req.params.id}`);
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});