Express bilan tanishuv - Node.js bilan server dasturlash

Express - Node uchun eng mashhur veb-freymvork. U node:http ustiga qurilgan va o'tgan bo'limdagi qo'lda yozilgan ishlarni tayyor qiladi.

O'rnatish #

Terminal

npm install express

Bu darslikda Express 5 ishlatiladi. Uning 4-versiyadan bir nechta muhim farqi bor va ular yo'l-yo'lakay ko'rsatiladi.

Birinchi ilova #

JavaScript

import express from "express";

const app = express();

app.get("/", (sorov, javob) => {
    javob.send("Salom, Express!");
});

app.get("/salom", (sorov, javob) => {
    javob.json({ xabar: "salom", vaqt: "barqaror" });
});

const server = app.listen(0);
const port = server.address().port;
const asos = `http://localhost:${port}`;

const birinchi = await fetch(asos + "/");
console.log(birinchi.status, await birinchi.text());

const ikkinchi = await fetch(asos + "/salom");
console.log(ikkinchi.headers.get("content-type"));
console.log(await ikkinchi.json());

server.close();

Natija

200 Salom, Express!
application/json; charset=utf-8
{ xabar: 'salom', vaqt: 'barqaror' }

10-bo'limdagi bilan solishtiring: writeHead, JSON.stringify, Content-Type - hech biri yozilmadi. res.json hammasini o'zi qiladi.

Javob metodlari #

JavaScript

import express from "express";

const app = express();

app.get("/matn", (s, j) => j.send("oddiy matn"));
app.get("/json", (s, j) => j.json({ holat: "yaxshi" }));
app.get("/kod", (s, j) => j.status(201).json({ yaratildi: true }));
app.get("/bosh", (s, j) => j.status(204).end());
app.get("/sarlavha", (s, j) => {
    j.set("X-Sinov", "qiymat").json({ qo: "shildi" });
});

const server = app.listen(0);
const port = server.address().port;
const asos = `http://localhost:${port}`;

for (const yol of ["/matn", "/json", "/kod", "/bosh"]) {
    const r = await fetch(asos + yol);
    console.log(yol, r.status, (await r.text()) || "(bo'sh)");
}

const s = await fetch(asos + "/sarlavha");
console.log("sarlavha:", s.headers.get("x-sinov"));

server.close();

Natija

/matn 200 oddiy matn
/json 200 {"holat":"yaxshi"}
/kod 201 {"yaratildi":true}
/bosh 204 (bo'sh)
sarlavha: qiymat

Metod	Nima qiladi
`res.send(...)`	Matn, HTML yoki bufer yuboradi
`res.json(...)`	JSON yuboradi va sarlavhani qo'yadi
`res.status(n)`	Holat kodini belgilaydi (zanjirlanadi)
`res.set(nom, q)`	Sarlavha qo'yadi
`res.end()`	Tanasiz yakunlaydi

Express 5 da res.send(404) ishlamaydi

Express 4 da shunday yozish mumkin edi:

JavaScript

res.send(404);          // Express 4: holat kodi

Express 5 da bu olib tashlandi. Endi res.send(404) raqamni tana sifatida yuboradi, holat esa 200 bo'lib qolaveradi.

To'g'ri shakl:

JavaScript

res.status(404).send("topilmadi");
res.sendStatus(404);

Eski qo'llanmalardan kod ko'chirayotganda bunga e'tibor bering.

Statik fayllar #

JavaScript

import express from "express";
import { mkdir, writeFile, rm } from "node:fs/promises";

await mkdir("ommaviy", { recursive: true });
await writeFile("ommaviy/uslub.css", "body { margin: 0; }", "utf8");

const app = express();
app.use(express.static("ommaviy"));

const server = app.listen(0);
const port = server.address().port;

const javob = await fetch(`http://localhost:${port}/uslub.css`);
console.log(javob.status);
console.log(javob.headers.get("content-type"));
console.log(await javob.text());

server.close();
await rm("ommaviy", { recursive: true, force: true });

Natija

200
text/css; charset=utf-8
body { margin: 0; }

express.static butun papkani ochadi va Content-Type ni fayl kengaytmasidan o'zi aniqlaydi.

Statik papkaga nima qo'yayotganingizni biling

express.static("ommaviy") o'sha papkadagi hamma faylni internetga ochadi.

Tasodifan u yerga .env, zaxira nusxa yoki ichki hujjat tushib qolsa, ular ham ochiq bo'ladi. Bu haqiqiy saytlarda tez-tez uchraydigan sizib chiqish sababi.

Qoida: statik papka faqat ommaviy fayllar uchun bo'lsin - CSS, JS, rasm. Loyihaning ildizini (express.static(".")) hech qachon ochmang.

Asinxron xatolar - Express 5 ning eng katta yangiligi #

JavaScript

import express from "express";

const app = express();

app.get("/buzuq", async (sorov, javob) => {
    throw new Error("ma'lumotlar bazasi javob bermadi");
});

app.get("/yaxshi", async (sorov, javob) => {
    javob.json({ holat: "yaxshi" });
});

app.use((xato, sorov, javob, keyingi) => {
    javob.status(500).json({ xato: "ichki xato" });
});

const server = app.listen(0);
const port = server.address().port;
const asos = `http://localhost:${port}`;

const yaxshi = await fetch(asos + "/yaxshi");
console.log(yaxshi.status, await yaxshi.json());

const buzuq = await fetch(asos + "/buzuq");
console.log(buzuq.status, await buzuq.json());

server.close();

Natija

200 { holat: 'yaxshi' }
500 { xato: 'ichki xato' }

Express 4 da bu ishlamasdi

Express 4 da async ishlovchi ichidagi xato hech qayerga yetib bormasdi. So'rov shunchaki osilib qolardi, toki kutish muddati tugamaguncha.

Shuning uchun har bir ishlovchini o'rash kerak edi:

JavaScript

app.get("/x", async (s, j, keyingi) => {
    try {
        // ...
    } catch (xato) {
        keyingi(xato);
    }
});

Yoki express-async-handler kabi paket o'rnatilardi.

Express 5 da bu muammo butunlay hal qilindi: rad etilgan vada avtomatik ravishda xato ishlovchisiga uzatiladi. Endi hech qanday o'ram kerak emas.

Bu 5-versiyaga o'tish uchun eng kuchli sabab.

node:http bilan solishtirish #

Ish	`node:http`	Express
Marshrutlash	`if` zanjiri	`app.get("/yol", ...)`
JSON javob	`writeHead` + `stringify`	`res.json(...)`
JSON so'rov	Bo'laklarni yig'ish	`express.json()`
Statik fayllar	Qo'lda o'qish	`express.static(...)`
404	Oxirgi `else`	Avtomatik
Xatolar	Har joyda `try/catch`	Xato ishlovchisi

JavaScript

import express from "express";

const app = express();

app.get("/", (s, j) => j.json({ manba: "express" }));

const server = app.listen(0);
const port = server.address().port;

const topilmadi = await fetch(`http://localhost:${port}/yoq-bunday`);
console.log("Noma'lum yo'l:", topilmadi.status);

const bor = await fetch(`http://localhost:${port}/`);
console.log("Bor yo'l:", bor.status, await bor.json());

server.close();

Natija

Noma'lum yo'l: 404
Bor yo'l: 200 { manba: 'express' }

404 ni yozmadik - Express uni o'zi qaytardi.

Ilovani ajratish #

Haqiqiy loyihada ilova va server alohida fayllarda bo'ladi:

JavaScript

import express from "express";

export function ilovaYarat() {
    const app = express();

    app.get("/holat", (sorov, javob) => {
        javob.json({ holat: "ishlayapti" });
    });

    return app;
}

JavaScript

import { ilovaYarat } from "./ilova.mjs";

const app = ilovaYarat();
const server = app.listen(0);
const port = server.address().port;

const javob = await fetch(`http://localhost:${port}/holat`);
console.log(await javob.json());

server.close();

Natija

{ holat: 'ishlayapti' }

Nega ajratish kerak

ilova.mjs faqat ilovani yasaydi, lekin portni tinglamaydi.

Foydasi testlarda ko'rinadi: test ilovani olib, unga to'g'ridan-to'g'ri so'rov yuboradi - haqiqiy port ochmasdan. Bu testlarni tezroq va ishonchliroq qiladi.

Bundan tashqari bitta ilovani turli portlarda yoki turli sozlamalar bilan ishga tushirish mumkin bo'ladi.

19-bo'limda testlarni aynan shunday yozamiz.

Amaliy topshiriq

Express o'rnatib, birinchi ilovani yozing.
res.send va res.json farqini ko'ring.
res.status(201) bilan holat kodini qaytaring.
res.send(404) yozib, Express 5 da nima bo'lishini ko'ring.
express.static bilan CSS fayl bering.
Noma'lum yo'lga murojaat qilib, 404 ni oling.
async ishlovchida xato tashlang.
Xato ishlovchisi qo'shib, 500 qaytaring.
Ilovani alohida faylga ajrating.
node:http versiyasi bilan qatorlar sonini solishtiring.

Xulosa #

Express node:http ustiga qurilgan; u marshrutlash, JSON va 404 ni tayyor beradi.
res.json sarlavhani o'zi qo'yadi; res.status(n) zanjirlanadi.
Express 5 da res.send(404) holat kodi emas - res.status yoki res.sendStatus ishlating.
express.static papkani ochadi - u yerga faqat ommaviy fayllar qo'ying.
Express 5 asinxron xatolarni avtomatik uzatadi - endi try/catch o'rami kerak emas.
Ilovani va serverni alohida yozing - testlar uchun.

Keyingi bo'limda marshrutlashni chuqurroq o'rganamiz.

O'rnatish #

Birinchi ilova #

Javob metodlari #

Statik fayllar #

Asinxron xatolar - Express 5 ning eng katta yangiligi #

node:http bilan solishtirish #

Ilovani ajratish #

Xulosa #

Xatolik topdingizmi?