Imagine walking into a restaurant. You (the client) look at the menu and place an order with the waiter (making a request). The waiter takes your order to the kitchen (the server), and after some time, returns with your food (the response). This everyday interaction perfectly mirrors how the web works through the request-response cycle.
Let's break down this analogy further to understand web communication:
// JavaScript code making a simple request
async function fetchWebPage() {
try {
// This is like walking into the restaurant
const response = await fetch('https://example.com');
if (response.ok) {
// This is like receiving your order
const content = await response.text();
console.log('Received webpage:', content.substring(0, 100) + '...');
} else {
// This is like being told your order can't be fulfilled
console.error('Failed to fetch page:', response.status);
}
} catch (error) {
// This is like the restaurant being closed
console.error('Error:', error);
}
}
// Making multiple requests (like ordering several dishes)
async function loadFullWebsite() {
try {
// Request HTML (main course)
const htmlResponse = await fetch('https://example.com');
const html = await htmlResponse.text();
// Request CSS (side dish)
const cssResponse = await fetch('https://example.com/styles.css');
const css = await cssResponse.text();
// Request JavaScript (dessert)
const jsResponse = await fetch('https://example.com/script.js');
const js = await jsResponse.text();
console.log('All resources loaded successfully!');
} catch (error) {
console.error('Failed to load all resources:', error);
}
}
// A more detailed request handler with response processing
class WebRequestHandler {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
async makeRequest(path, options = {}) {
const url = new URL(path, this.baseUrl);
// Add timestamp to see request timing
const startTime = performance.now();
try {
const response = await fetch(url, {
...options,
// Add standard headers
headers: {
'Accept': 'application/json',
...options.headers
}
});
// Calculate request duration
const duration = performance.now() - startTime;
console.log(`Request took ${duration}ms`);
// Handle different response status codes
switch (response.status) {
case 200:
return await response.json();
case 404:
throw new Error('Resource not found');
case 500:
throw new Error('Server error');
default:
throw new Error(`Unexpected status: ${response.status}`);
}
} catch (error) {
console.error('Request failed:', error);
throw error;
}
}
}
// Usage example
const handler = new WebRequestHandler('https://api.example.com');
handler.makeRequest('/users/123')
.then(data => console.log('User data:', data))
.catch(error => console.error('Failed to fetch user:', error));
When you type "www.example.com" in your browser, a complex series of events begins:
class BrowserSimulator {
async processWebPage(url) {
console.log('1. DNS Lookup...');
// Simulate DNS lookup
await this.simulateDNSLookup(url);
console.log('2. Establishing TCP Connection...');
// Simulate TCP handshake
await this.simulateTCPConnection();
console.log('3. Sending HTTP Request...');
// Make the actual request
const response = await fetch(url);
const html = await response.text();
console.log('4. Processing HTML...');
// Parse HTML
this.parseHTML(html);
console.log('5. Requesting Additional Resources...');
// Find and request CSS, JS, images
await this.loadAdditionalResources(html);
console.log('6. Rendering Page...');
// Construct DOM and render
this.renderPage();
}
// Simulated browser processes
async simulateDNSLookup(url) {
// In reality, this would query DNS servers
await new Promise(resolve => setTimeout(resolve, 100));
return '93.184.216.34'; // Example IP
}
async simulateTCPConnection() {
// In reality, this would establish TCP connection
await new Promise(resolve => setTimeout(resolve, 100));
}
parseHTML(html) {
// Create DOM tree from HTML
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
return doc;
}
async loadAdditionalResources(html) {
// Find and load CSS, JS, images
const resourceUrls = this.extractResourceUrls(html);
await Promise.all(resourceUrls.map(url => fetch(url)));
}
renderPage() {
// Update the DOM and render
console.log('Page rendered!');
}
}
// Usage
const browser = new BrowserSimulator();
browser.processWebPage('https://example.com')
.then(() => console.log('Page load complete!'))
.catch(error => console.error('Page load failed:', error));
// Tool to monitor and analyze network requests
class NetworkMonitor {
constructor() {
this.requests = new Map();
this.startTime = performance.now();
}
logRequest(url) {
const requestTime = performance.now() - this.startTime;
this.requests.set(url, {
startTime: requestTime,
status: 'pending'
});
}
logResponse(url, status) {
const request = this.requests.get(url);
if (request) {
request.status = status;
request.endTime = performance.now() - this.startTime;
request.duration = request.endTime - request.startTime;
}
}
generateReport() {
console.log('Network Request Report:');
this.requests.forEach((data, url) => {
console.log(`
URL: ${url}
Status: ${data.status}
Duration: ${data.duration.toFixed(2)}ms
`);
});
}
}
// Usage example
const monitor = new NetworkMonitor();
// Monitor fetch requests
const originalFetch = window.fetch;
window.fetch = async function(url, options) {
monitor.logRequest(url);
try {
const response = await originalFetch(url, options);
monitor.logResponse(url, response.status);
return response;
} catch (error) {
monitor.logResponse(url, 'failed');
throw error;
}
};
// Generate report after page load
window.addEventListener('load', () => {
monitor.generateReport();
});
class RequestError extends Error {
constructor(message, status) {
super(message);
this.status = status;
this.name = 'RequestError';
}
}
async function robustRequest(url, options = {}) {
const MAX_RETRIES = 3;
let lastError = null;
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
try {
const response = await fetch(url, options);
if (response.ok) {
return await response.json();
}
switch (response.status) {
case 404:
throw new RequestError('Resource not found', 404);
case 429:
// Rate limited - wait and retry
const waitTime = response.headers.get('Retry-After') || attempt * 1000;
await new Promise(resolve => setTimeout(resolve, waitTime));
continue;
case 500:
// Server error - retry
await new Promise(resolve => setTimeout(resolve, attempt * 1000));
continue;
default:
throw new RequestError(`HTTP Error ${response.status}`, response.status);
}
} catch (error) {
lastError = error;
if (error instanceof RequestError && error.status < 500) {
// Don't retry client errors (except rate limiting)
throw error;
}
if (attempt === MAX_RETRIES) {
throw new Error(`Failed after ${MAX_RETRIES} attempts: ${error.message}`);
}
}
}
}
// Usage example
async function loadUserProfile(userId) {
try {
const data = await robustRequest(`/api/users/${userId}`);
console.log('User profile:', data);
} catch (error) {
if (error instanceof RequestError && error.status === 404) {
console.log('User not found');
} else {
console.error('Failed to load profile:', error);
}
}
}
The request-response cycle is the fundamental pattern that powers the modern web. Understanding this cycle helps you:
When working with web requests, remember to: