怎么利用JavaScript进行网络请求的封装？

fetch

// request.js
const API_BASE_URL = 'https://api.yourdomain.com'; // 你的API基础URL

/**
 * 封装的通用网络请求函数
 * @param {string} url 请求路径
 * @param {Object} options 请求选项
 * @returns {Promise<Object>} 返回一个Promise，解析为JSON数据
 */
async function request(url, options = {}) {
    const defaultHeaders = {
        'Content-Type': 'application/json',
        // 'Authorization': `Bearer ${localStorage.getItem('token') || ''}`, // 示例：添加认证Token
    };

    const config = {
        method: 'GET',
        headers: { ...defaultHeaders, ...options.headers },
        ...options,
    };

    // 如果是GET或HEAD请求，通常不带body
    if (['GET', 'HEAD'].includes(config.method.toUpperCase())) {
        delete config.body;
        // 可以在这里处理URL参数拼接，但为了简洁，我们假设URL已经处理好
    } else if (config.body && typeof config.body === 'object') {
        config.body = JSON.stringify(config.body);
    }

    try {
        const response = await fetch(`${API_BASE_URL}${url}`, config);

        // 统一处理HTTP状态码
        if (!response.ok) {
            // 这里可以做更细致的错误分类，比如401重定向登录，404显示特定信息等
            const errorData = await response.json().catch(() => ({ message: response.statusText }));
            throw new Error(`HTTP Error ${response.status}: ${errorData.message || '未知错误'}`);
        }

        // 尝试解析JSON，如果不是JSON响应，直接返回原始响应
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
            return await response.json();
        } else {
            return await response.text(); // 或者根据需要返回blob/arrayBuffer
        }
    } catch (error) {
        // 在这里可以进行全局的错误日志记录或通知
        console.error('网络请求发生错误:', error);
        throw error; // 将错误继续抛出，让调用者处理
    }
}

// 导出常用的HTTP方法
export const get = (url, options) => request(url, { method: 'GET', ...options });
export const post = (url, data, options) => request(url, { method: 'POST', body: data, ...options });
export const put = (url, data, options) => request(url, { method: 'PUT', body: data, ...options });
export const del = (url, options) => request(url, { method: 'DELETE', ...options }); // delete是保留字，用del

// 示例用法
// async function fetchData() {
//     try {
//         const users = await get('/users');
//         console.log('用户列表:', users);

//         const newUser = await post('/users', { name: 'Alice', age: 30 });
//         console.log('新用户:', newUser);
//     } catch (error) {
//         console.error('获取数据失败:', error.message);
//     }
// }
// fetchData();

request

fetch

get

post

fetch

fetch

axios.get

try...catch

response.ok

JSON.parse

Authorization

alert

console.error

fetch

axios

fetch

fetch

TypeError

code: -1

response.json()

fetch

AbortController

AbortController

abort()

// 在request函数中加入AbortController支持
async function request(url, options = {}) {
    // ... 其他配置 ...
    const controller = new AbortController();
    config.signal = controller.signal; // 将signal传递给fetch

    // 返回一个包含controller的Promise，以便外部可以取消
    const requestPromise = (async () => {
        try {
            const response = await fetch(`${API_BASE_URL}${url}`, config);
            // ... 错误处理和JSON解析 ...
            return await response.json(); // 假设总是返回JSON
        } catch (error) {
            if (error.name === 'AbortError') {
                console.warn('请求已被取消:', url);
                throw new Error('Request Aborted'); // 抛出特定错误
            }
            console.error('网络请求发生错误:', error);
            throw error;
        }
    })();

    // 可以在这里返回一个包含cancel方法的对象
    return Object.assign(requestPromise, {
        cancel: () => controller.abort(),
    });
}

const req = post('/data', {...}); req.cancel();

options

// 伪代码：在request函数外层添加一个去抖包装器
const debouncedGetUsers = debounce((query) => get('/users', { params: { q: query } }), 300);
// 用户输入时调用 debouncedGetUsers(input.value)

createApi

loading

error

Redux Toolkit

createApi

Vue Use

useFetch

// 伪代码：集成状态管理
import { useStore } from './store'; // 假设有一个简单的全局状态管理

function createApiHook(url, method) {
    return (data, options) => {
        const [state, setState] = useStore(); // 获取全局状态
        setState({ loading: true, error: null }); // 设置加载状态

        return request(url, { method, body: data, ...options })
            .then(res => {
                setState({ loading: false, data: res }); // 更新数据
                return res;
            })
            .catch(err => {
                setState({ loading: false, error: err }); // 更新错误
                throw err;
            });
    };
}

export const useGetUsers = createApiHook('/users', 'GET');
// 在组件中使用：const { data, loading, error } = useGetUsers();

localStorage