三亚市网站建设_网站建设公司_jQuery_seo优化

前端请求接口的核心是通过 HTTP/HTTPS 协议与后端交互，常见方法包括原生 API（XMLHttpRequest、fetch）、封装库（Axios）、框架内置方案（Vue Resource、React Query 等），不同方法在易用性、兼容性、功能上差异显著，以下是详细解析：

一、核心请求方式分类及对比

二、详细解析 + 实战案例

1. 原生 XMLHttpRequest（XHR）

最早的前端请求 API，兼容性覆盖所有浏览器（包括 IE），但语法冗余，需手动处理请求状态。

核心特点：

• 支持 GET/POST/PUT/DELETE 等所有 HTTP 方法；
• 可监听请求进度（如文件上传进度）；
• 需手动解析响应数据（如 JSON.parse）；
• 需手动处理错误（网络错误、状态码错误）。

案例（GET 请求）：

// 创建 XHR 实例 const xhr = new XMLHttpRequest(); // 配置请求：方法、URL、是否异步 xhr.open('GET', 'https://api.example.com/user?id=1', true); // 设置响应类型（可选） xhr.responseType = 'json'; // 监听请求状态变化 xhr.onreadystatechange = function() { // readyState=4 表示请求完成，status=200 表示响应成功 if (xhr.readyState === 4 && xhr.status === 200) { console.log('请求成功：', xhr.response); } else if (xhr.readyState === 4) { console.error('请求失败：', xhr.statusText); } }; // 监听网络错误 xhr.onerror = function() { console.error('网络错误'); }; // 发送请求 xhr.send();

案例（POST 请求，提交 JSON）：

const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/user', true); // 设置请求头（JSON 格式需指定 Content-Type） xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { console.log('提交成功：', JSON.parse(xhr.responseText)); } else { console.error('提交失败：', xhr.status); } } }; // 发送 JSON 数据（需转为字符串） const data = { name: '张三', age: 20 }; xhr.send(JSON.stringify(data));

2. 原生 fetch API

ES6 推出的现代请求 API，基于 Promise 设计，语法更简洁，无需手动封装异步逻辑，但存在「坑点」（如状态码 404/500 不会触发 reject）。

核心特点：

• Promise 化，支持 async/await 语法；
• 默认不携带 Cookie（需配置 credentials: 'include'）；
• 需手动处理 HTTP 错误（如 404/500）；
• 响应需手动解析（如 res.json ()、res.text ()）。

案例（GET 请求）：

// 基础 GET 请求 fetch('https://api.example.com/user?id=1') .then(res => { // 第一步：判断 HTTP 状态是否成功 if (!res.ok) { // res.ok 等价于 res.status >=200 && res.status <300 throw new Error(`请求失败：${res.status}`); } // 第二步：解析响应数据（JSON 格式） return res.json(); }) .then(data => { console.log('请求成功：', data); }) .catch(err => { console.error('错误：', err); // 捕获网络错误/HTTP 错误 }); // 结合 async/await（更简洁） async function getUser() { try { const res = await fetch('https://api.example.com/user?id=1', { method: 'GET', credentials: 'include', // 携带 Cookie headers: { 'Authorization': 'Bearer token123' // 请求头 } }); if (!res.ok) throw new Error(`HTTP 错误：${res.status}`); const data = await res.json(); console.log(data); } catch (err) { console.error('请求失败：', err); } } getUser();

案例（POST 请求）：

async function addUser() { const data = { name: '李四', age: 25 }; try { const res = await fetch('https://api.example.com/user', { method: 'POST', // 请求方法 headers: { 'Content-Type': 'application/json' // 指定请求体格式 }, body: JSON.stringify(data), // 请求体（JSON 需转字符串） timeout: 5000 // 注意：fetch 原生不支持超时，需手动封装 }); if (!res.ok) throw new Error(`提交失败：${res.status}`); const result = await res.json(); console.log('添加成功：', result); } catch (err) { console.error('错误：', err); } } addUser();

3. Axios（最常用的封装库）

基于 XHR 封装的第三方库，解决了 fetch 的痛点（自动处理错误、超时、拦截器等），是前端项目的首选。

核心特点：

• 自动转换 JSON 数据（无需手动 parse）；
• 支持请求 / 响应拦截器（统一加 token、处理全局错误）；
• 支持取消请求、超时设置；
• 支持 FormData 上传文件；
• 兼容浏览器和 Node.js。

前置：安装 Axios

# npm 安装 npm install axios # 或 CDN 引入 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios封装：https://blog.csdn.net/gongyanzi/article/details/156456978?sharetype=blogdetail&sharerId=156456978&sharerefer=PC&sharesource=gongyanzi&spm=1011.2480.3001.8118

案例 1：基础 GET/POST 请求

import axios from 'axios'; // GET 请求（参数拼接在 URL） axios.get('https://api.example.com/user', { params: { id: 1 }, // 自动拼接为 ?id=1 timeout: 5000, // 超时时间 5 秒 headers: { 'Authorization': 'Bearer token123' } }) .then(res => { console.log('请求成功：', res.data); // res.data 直接是解析后的 JSON }) .catch(err => { console.error('错误：', err); // 自动捕获网络错误/HTTP 错误 }); // POST 请求（提交 JSON） axios.post('https://api.example.com/user', { name: '王五', age: 30 }, { timeout: 5000, headers: { 'Content-Type': 'application/json' } }) .then(res => { console.log('提交成功：', res.data); }) .catch(err => { if (err.response) { // HTTP 状态码错误（如 404/500） console.error('响应错误：', err.response.status, err.response.data); } else if (err.request) { // 网络错误（无响应） console.error('网络错误：', err.request); } else { // 其他错误 console.error('请求错误：', err.message); } }); // 结合 async/await async function updateUser() { try { const res = await axios.put('https://api.example.com/user/1', { age: 31 }); console.log('更新成功：', res.data); } catch (err) { console.error('更新失败：', err); } } updateUser();

案例 2：拦截器（核心优势）

// 请求拦截器：统一添加 token、处理请求前逻辑 axios.interceptors.request.use( config => { // 给所有请求添加 token const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, err => Promise.reject(err) ); // 响应拦截器：统一处理错误、解析数据 axios.interceptors.response.use( res => { // 只返回 data 字段，简化业务代码 return res.data; }, err => { // 统一处理 401 未授权（跳登录页） if (err.response?.status === 401) { window.location.href = '/login'; } return Promise.reject(err); } ); // 之后请求只需简化写法 axios.get('https://api.example.com/user') .then(data => console.log(data)) // 直接拿到 res.data .catch(err => console.error(err));

案例 3：取消请求（如搜索框防抖）

// 创建取消令牌 const CancelToken = axios.CancelToken; let cancel; // 搜索请求（输入防抖） function search(keyword) { // 取消上一次未完成的请求 if (cancel) cancel('请求已取消'); axios.get('https://api.example.com/search', { params: { keyword }, cancelToken: new CancelToken(c => { cancel = c; // 保存取消函数 }) }) .then(data => console.log(data)) .catch(err => { if (axios.isCancel(err)) { console.log('请求取消：', err.message); } else { console.error('搜索失败：', err); } }); } // 模拟输入防抖 search('vue'); // 发起请求 search('react'); // 取消上一次请求，发起新请求

4. 框架内置方案（以 Vue3 useFetch 为例）

Vue3 + Vite 提供的useFetch（基于 fetch 封装），结合框架生命周期，自动处理请求状态（加载 / 成功 / 失败），适合 Vue 项目。

案例：

<script setup lang="ts"> import { useFetch } from '@vueuse/core'; // 发起 GET 请求 const { data, isLoading, error, refresh } = useFetch( 'https://api.example.com/user?id=1', { method: 'GET', headers: { 'Authorization': 'Bearer token123' } } ).json(); // 自动解析 JSON // 手动触发刷新 function reload() { refresh(); } </script> <template> <div v-if="isLoading">加载中...</div> <div v-else-if="error">请求失败：{{ error.message }}</div> <div v-else> 用户名：{{ data.name }} <button @click="reload">刷新</button> </div> </template>

三、核心区别总结

1. 兼容性：XHR > Axios（需 polyfill）> fetch > 框架内置；
2. 易用性：框架内置 > Axios > fetch > XHR；
3. 功能丰富度：Axios 支持拦截器、取消请求、超时等，是企业级项目首选；
4. 原生 vs 封装：原生 API（XHR/fetch）无需依赖，但需手动处理细节；封装库（Axios）开箱即用，适合生产环境。

四、选型建议

• 老项目 / 兼容 IE：用 XHR 或 Axios（加 polyfill）；
• 现代浏览器 / 轻量项目：fetch（需封装错误处理）；
• 企业级项目 / 需要拦截器 / 取消请求：Axios（首选）；
• Vue/React 生态内：用框架内置方案（如 useFetch、React Query），结合生命周期更优雅。