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

阿里·犸良

一站式动效制作平台

52

查看详情

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

大家都在看：