Adakah anda membina aplikasi web tetapi bergelut dengan penyepaduan API? Memahami HTTP ialah asas pembangunan web moden, namun ia sering diabaikan. Panduan ini akan mengubah anda daripada pengguna API biasa kepada pakar HTTP yang yakin.
Mengapa HTTP Penting untuk Pembangunan Web
Prasyarat
Konsep Teras
Selam Dalam Kaedah HTTP
Topik Lanjutan
Strategi Caching
Corak Pengendalian Ralat
Penghadan Kadar
Konfigurasi CORS
Membina API RESTful
Melaksanakan Pengesahan
Mengendalikan Muat Naik Fail
Pengoptimuman Prestasi
Alat Disyorkan
Bacaan Tambahan
Sumber Komuniti
Setiap interaksi web bergantung pada HTTP sebagai asasnya. Memahami HTTP bukan sahaja tentang membuat panggilan API—ia juga mengenai membina aplikasi web yang mantap, selamat dan berprestasi yang berskala.
HTTP (Hypertext Transfer Protocol) membentuk tulang belakang komunikasi web. Panduan ini meneroka kaedah terasnya melalui contoh praktikal.
Strategi Caching: Pelaksanaan HTTP yang betul membolehkan caching yang berkesan, mengurangkan beban pelayan dan meningkatkan masa tindak balas
Pengurusan Sambungan: Memahami HTTP/2 dan sambungan terus hidup membantu mengoptimumkan penggunaan sumber rangkaian
Pengoptimuman Muatan: Penggunaan kaedah HTTP dan pengepala yang betul meminimumkan pemindahan data yang tidak perlu
Pengimbangan Beban: Pengetahuan HTTP membolehkan pengedaran trafik yang lebih baik merentas pelayan
Mekanisme Pengesahan: HTTP menyediakan pelbagai skim pengesahan (Asas, Pembawa, OAuth)
Keselamatan CORS: Memahami Perkongsian Sumber Rentas Asal menghalang akses tanpa kebenaran
Perlindungan Data: Penyulitan HTTPS melindungi maklumat sensitif dalam transit
Pengesahan Input: Pengesahan permintaan yang betul menghalang serangan suntikan dan pelanggaran data
Reka Bentuk API: Kepakaran HTTP membolehkan penciptaan API yang intuitif dan RESTful
Kemahiran Nyahpepijat: Memahami HTTP membantu mengenal pasti dan menyelesaikan isu komunikasi dengan cepat
Seni Bina Sistem: Pengetahuan tentang HTTP memberi kesan kepada keputusan seni bina
Kerjasama Pasukan: Pemahaman HTTP biasa meningkatkan komunikasi pembangun
Protokol Tanpa Status: Setiap kitaran permintaan/tindak balas adalah bebas
Model Pelayan Pelanggan: Pemisahan kebimbangan yang jelas antara bahagian hadapan dan bahagian belakang
Berasaskan Sumber: URL mengenal pasti dan mencari sumber
Berasaskan Kaedah: Kaedah (kata kerja) yang berbeza untuk operasi yang berbeza
Kaedah (DAPATKAN, POS, dll.)
URL
Tajuk
Badan (jika berkenaan)
Mengesahkan permintaan
Melakukan operasi
Menyediakan respons
Kod status
Tajuk
Badan (jika berkenaan)
Authorization: Bearer token123 Content-Type: application/json Accept: application/json Cache-Control: no-cache
{
"request": {
"data": "Example request payload"
},
"response": {
"data": "Example response payload"
}
}
Kunci API
Pelaksanaan:
// Middleware example
const authenticate = async (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1];
if (!token) {
return res.status(401).json({ error: 'Authentication required' });
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (error) {
res.status(401).json({ error: 'Invalid token' });
}
};
Sebelum menyelami kaedah HTTP, pastikan anda mempunyai:
Keperluan Teknikal:
Pengetahuan yang Diperlukan:
Pelaksanaan biasa:
Authorization: Bearer token123 Content-Type: application/json Accept: application/json Cache-Control: no-cache
{
"request": {
"data": "Example request payload"
},
"response": {
"data": "Example response payload"
}
}
DAPATKAN permintaan untuk mendapatkan semula data tanpa mengubah suai keadaan pelayan. Mereka sepatutnya:
Idempoten
Boleh Cache
Selamat
// Middleware example
const authenticate = async (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1];
if (!token) {
return res.status(401).json({ error: 'Authentication required' });
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (error) {
res.status(401).json({ error: 'Invalid token' });
}
};
// Success Codes 200 OK // Successful GET 201 Created // Successful POST 204 No Content // Successful DELETE // Client Error Codes 400 Bad Request // Invalid syntax 401 Unauthorized // Authentication required 404 Not Found // Resource doesn't exist // Server Error Codes 500 Internal Error // Server-side error
POST mencipta sumber baharu. Ia sepatutnya:
Jangan jadi idempoten
Buat sumber baharu
Kembalikan 201 kejayaan
graph LR
Client-->|GET /products|Server
Server-->|200 + Products|Client
// GET /products/:id
// Purpose: Retrieve single product
// Security: Validate ID format
// Error handling: 404 if not found
app.get("/products/:id", async (req, res) => {
try {
const product = await Product.findById(req.params.id);
if (!product) {
return res.status(404).json({
error: "Product not found"
});
}
res.json(product);
} catch (error) {
handleError(error, res);
}
});
PUT menggantikan keseluruhan sumber. Ia sepatutnya:
Idempoten
Ganti keseluruhan sumber
Buat jika tidak wujud
graph LR
Client-->|POST /products|Server
Server-->|201 Created|Client
app.post("/products", async (req, res) => {
try {
// Validation
const { name, price } = req.body;
if (!name || !price) {
return res.status(400).json({
error: "Missing required fields"
});
}
// Create resource
const product = new Product(req.body);
await product.save();
// Return created resource
res.status(201).json({
message: "Product created",
product
});
} catch (error) {
handleError(error, res);
}
});
PATCH mengemas kini sebahagian sumber. Ia sepatutnya:
Jadilah idempoten
Kemas kini medan tertentu
Sahkan kemas kini separa
graph LR
Client-->|PUT /products/123|Server
Server-->|200 OK|Client
app.put("/products/:id", async (req, res) => {
try {
const product = await Product.findByIdAndUpdate(
req.params.id,
req.body,
{ new: true, overwrite: true }
);
if (!product) {
return res.status(404).json({
error: "Product not found"
});
}
res.json(product);
} catch (error) {
handleError(error, res);
}
});
DELETE mengalih keluar sumber. Ia sepatutnya:
Jadilah idempoten
Kembalikan 204 kejayaan
Kendalikan sumber yang hilang dengan baik
graph LR
Client-->|PATCH /products/123|Server
Server-->|200 OK|Client
app.patch("/products/:id", async (req, res) => {
try {
// Validate allowed updates
const updates = Object.keys(req.body);
const allowedUpdates = ['name', 'price', 'description'];
const isValidOperation = updates.every(update =>
allowedUpdates.includes(update)
);
if (!isValidOperation) {
return res.status(400).json({
error: "Invalid updates"
});
}
const product = await Product.findByIdAndUpdate(
req.params.id,
req.body,
{ new: true, runValidators: true }
);
if (!product) {
return res.status(404).json({
error: "Product not found"
});
}
res.json(product);
} catch (error) {
handleError(error, res);
}
});
graph LR
Client-->|DELETE /products/123|Server
Server-->|204 No Content|Client
app.delete("/products/:id", async (req, res) => {
try {
const product = await Product.findByIdAndDelete(req.params.id);
if (!product) {
return res.status(404).json({
error: "Product not found"
});
}
res.status(204).send();
} catch (error) {
handleError(error, res);
}
});
// Setting cache headers
app.get('/static-content', (req, res) => {
res.set({
'Cache-Control': 'public, max-age=86400',
'ETag': 'W/"123-abc"'
});
res.send(content);
});
const Redis = require('redis');
const redis = Redis.createClient();
// Cache middleware
const cacheMiddleware = async (req, res, next) => {
const key = `cache:${req.originalUrl}`;
const cached = await redis.get(key);
if (cached) {
return res.json(JSON.parse(cached));
}
res.sendResponse = res.json;
res.json = async (body) => {
await redis.setEx(key, 3600, JSON.stringify(body));
res.sendResponse(body);
};
next();
};
Buat API CRUD yang lengkap untuk pengurusan pengguna dengan keperluan berikut:
Pendaftaran dan pengesahan pengguna
Pengurusan profil
Kawalan akses berasaskan peranan
Pengesahan input
Ralat pengendalian
Authorization: Bearer token123 Content-Type: application/json Accept: application/json Cache-Control: no-cache
Laksanakan pengesahan berasaskan JWT dengan:
Penjanaan token
Segarkan semula token
Fungsi tetapan semula kata laluan
Pengaktifan akaun
{
"request": {
"data": "Example request payload"
},
"response": {
"data": "Example response payload"
}
}
Laksanakan sistem muat naik fail dengan:
Muat naik berbilang fail
Pengesahan jenis fail
Sekatan saiz
Penjejakan kemajuan
// Middleware example
const authenticate = async (req, res, next) => {
const token = req.headers.authorization?.split(' ')[1];
if (!token) {
return res.status(401).json({ error: 'Authentication required' });
}
try {
const decoded = jwt.verify(token, process.env.JWT_SECRET);
req.user = decoded;
next();
} catch (error) {
res.status(401).json({ error: 'Invalid token' });
}
};
Optimumkan API sedia ada dengan:
Mampatan tindak balas
Penapisan medan
Penomboran
Caching data
Pengoptimuman pertanyaan
// Success Codes 200 OK // Successful GET 201 Created // Successful POST 204 No Content // Successful DELETE // Client Error Codes 400 Bad Request // Invalid syntax 401 Unauthorized // Authentication required 404 Not Found // Resource doesn't exist // Server Error Codes 500 Internal Error // Server-side error
Posmen
Insomnia
Klien Thunder (Kod VS)
Morgan
Nyahpepijat
Relik Baharu
Datadog
Swagger/OpenAPI
Pelan Tindakan API
Dokumentasi Posmen
Spesifikasi HTTP/1.1 (RFC 7230-7235)
Spesifikasi HTTP/2 (RFC 7540)
Amalan Terbaik Reka Bentuk API REST
"API Web RESTful" oleh Leonard Richardson
"Buku Panduan Reka Bentuk API Web" oleh Brian Mulloy
"HTTP: The Definitive Guide" oleh David Gourley
Dokumen Web MDN - HTTP
freeCodeCamp - API dan Perkhidmatan Mikro
Pluralsight - Asas REST
Limpahan Tindanan - tag [api]
Reddit - r/webdev, r/nodejs
Dev.to - #api, #webdev
Express.js
Berpuasa
NestJS
Garis Panduan Microsoft REST API
Panduan Reka Bentuk API Google
Garis Panduan API Platform Heroku
Kekal dikemas kini dengan:
Blog Reka Bentuk API
Ceramah Persidangan Teknologi
Podcast Pembangunan Web
Atas ialah kandungan terperinci HTTP: Protokol Setiap Pembangun Web Mesti Menguasai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
