🌐 第十一章：网络请求与数据交互

// 基本 GET 请求
async function fetchData() {
    try {
        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);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

// POST 请求
async function postData() {
    try {
        const response = await fetch('https://api.example.com/data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: 'John',
                age: 30
            })
        });
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

// 解析 JSON
const response = await fetch('https://api.example.com/data');
const data = await response.json();

// 发送 FormData
const formData = new FormData();
formData.append('name', 'John');
formData.append('age', 30);

const response = await fetch('https://api.example.com/upload', {
    method: 'POST',
    body: formData
});

// 下载文件
const response = await fetch('https://example.com/image.jpg');
const blob = await response.blob();

// 创建下载链接
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'image.jpg';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);

// 使用 AbortController
const controller = new AbortController();
const signal = controller.signal;

// 发起请求
const fetchPromise = fetch('https://api.example.com/data', {
    signal
});

// 取消请求
setTimeout(() => {
    controller.abort();
}, 1000);

// 处理结果
try {
    const response = await fetchPromise;
    const data = await response.json();
    console.log(data);
} catch (error) {
    if (error.name === 'AbortError') {
        console.log('Request aborted');
    } else {
        console.error(error);
    }
}

// 封装 Fetch API
class Http {
    constructor() {
        this.baseURL = 'https://api.example.com';
        this.headers = {
            'Content-Type': 'application/json'
        };
    }
    
    // 请求拦截器
    request(config) {
        // 添加认证 token
        const token = localStorage.getItem('token');
        if (token) {
            this.headers['Authorization'] = `Bearer ${token}`;
        }
        
        return {
            url: this.baseURL + config.url,
            method: config.method || 'GET',
            headers: { ...this.headers, ...config.headers },
            body: config.body
        };
    }
    
    // 响应拦截器
    response(response) {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    }
    
    // 发送请求
    async fetch(config) {
        try {
            const options = this.request(config);
            const response = await window.fetch(options.url, options);
            return await this.response(response);
        } catch (error) {
            console.error('Fetch error:', error);
            throw error;
        }
    }
    
    // 便捷方法
    get(url, config = {}) {
        return this.fetch({ ...config, url, method: 'GET' });
    }
    
    post(url, data, config = {}) {
        return this.fetch({
            ...config,
            url,
            method: 'POST',
            body: JSON.stringify(data)
        });
    }
}

// 使用
const http = new Http();
http.get('/data').then(data => {
    console.log(data);
});