网络请求面试真题详解：从基础到实战的进阶指南

网络请求是现代Web开发中不可或缺的一部分，它允许客户端与服务器进行数据交换。理解HTTP和HTTPS协议是掌握网络请求的第一步。

HTTP与HTTPS协议

• HTTP（超文本传输协议）：用于在客户端和服务器之间传输超文本文档（如HTML文档）的一种协议。HTTP是无状态的，每次请求-响应都是独立的。
• HTTPS：在HTTP基础上加入了SSL/TLS协议，为数据传输提供了加密和身份验证机制，确保了数据的安全性。HTTPS协议使用端口443。

使用案例

// 示例：HTTP请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

// 示例：HTTPS请求
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
async function fetchExample() {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
}
fetchExample();

HTTP方法描述了客户端向服务器发送请求的类型。常见的方法包括：

• GET：用于获取资源，适合只读操作。
• POST：用于提交数据到服务器以创建新的资源。
• PUT：用于更新服务器上已存在的资源。
• DELETE：用于删除服务器上的资源。

实战示例

使用fetch API实现：

const fetchGet = async () => {
    const response = await fetch('https://api.example.com/data', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
}

const fetchPost = async (data) => {
    const response = await fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
}

const fetchPut = async (data, id) => {
    const response = await fetch(`https://api.example.com/data/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
}

const fetchDelete = async (id) => {
    const response = await fetch(`https://api.example.com/data/${id}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
}

HTTP状态码用于描述服务器响应客户端请求的结果。常见的状态码有：

• 200 OK：请求已成功。
• 404 Not Found：请求的资源未找到。
• 500 Internal Server Error：服务器在尝试处理请求时发生了错误。

常见状态码处理

fetchGet()
    .catch(error => console.error(`Fetch error: ${error}`));

fetchPost({ data: {} })
    .catch(error => console.error(error));

fetchPut({ data: {} }, 'id');
fetchDelete('id');

JavaScript的fetch API

fetch API提供了强大的功能来处理网络请求，包括请求发起、状态检查和异步处理。

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error(`Fetch error: ${error}`));

axios

axios是一个更高级的HTTP客户端库，提供了更简洁、易于使用的API。

import axios from 'axios';

axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

axios.post('https://api.example.com/data', { data: {} })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

在服务器端，开发者通常使用Node.js环境下的框架，如Express，来进行网络请求的处理。

使用Express

const express = require('express');
const app = express();

app.get('/data', (req, res) => {
    res.json({ message: 'Data retrieved' });
});

app.post('/data', (req, res) => {
    const data = req.body;
    res.json({ message: 'Data created', data });
});

app.put('/data/:id', (req, res) => {
    const id = req.params.id;
    const data = req.body;
    res.json({ message: 'Data updated', id, data });
});

app.delete('/data/:id', (req, res) => {
    const id = req.params.id;
    res.json({ message: 'Data deleted', id });
});

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

使用Chrome开发者工具

Chrome开发者工具提供了强大的网络请求调试功能，可以帮助开发者分析、优化请求性能。

性能优化策略

• 缓存控制：利用HTTP缓存机制减少重复请求。
• 优化资源加载：压缩资源、使用CDN等技术加速加载。
• 错误重试：为网络请求实现重试机制，提高可用性。

通过以上指南和代码示例的实践，开发者能够深入理解网络请求的原理和应用，从而在面试和项目开发中游刃有余。