1. Fetch API 基本用法
1.1 浏览器原生 Fetch API
Fetch API 是现代浏览器提供的网络请求接口，基于 Promise 机制，能够让前端以更直观的方式发起异步请求并获取响应。
在发起请求后，返回的是一个 Response 对象，后续需要用 response.json()、response.text() 等方法来解析响应数据，具体取决于服务器返回的 Content-Type。
使用 async/await 可以让异步代码更具可读性：以下示例展示了一个简单的 GET 请求流程。
async function getData(url){const res = await fetch(url);if (!res.ok) {throw new Error(`请求失败，状态码：${res.status}`);}const data = await res.json();return data;
}1.2 请求选项与响应处理
通过给 fetch 传入第二个参数的选项对象，可以配置 method、headers、body 等属性，从而实现灵活的请求。
需要注意的是 Fetch 不会自动抛出 HTTP 错误，只有网络错误才会抛出异常，因此要手动检查 res.ok 和 res.status 来判断请求是否成功。
如果请求需要设置超时，可以结合 AbortController 实现取消与超时控制。
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);fetch('/api/items', { signal: controller.signal }).then(res => {clearTimeout(timeoutId);if (!res.ok) throw new Error(res.statusText);return res.json();}).then(data => console.log(data)).catch(err => console.error('Fetch error:', err));2. Koa 后端接口设计与返回数据
2.1 Koa 路由返回 JSON 数据的基本写法
在 Koa 框架中，常见的做法是通过路由直接返回 JSON 数据，ctx.body 会自动序列化成 JSON。
同时，可以通过 ctx.status、ctx.headers 等设置响应状态和头部信息，以提升前后端协作的稳定性。
下面是一段最简单的路由示例，用于直接返回一个包含数据的 JSON 对象。
// Koa 路由返回 JSON 的最简单写法
const Router = require('@koa/router');
const router = new Router();router.get('/api/items', ctx => {ctx.status = 200;ctx.body = { code: 0, data: { items: ['Apple', 'Banana', 'Cherry'] } };
});module.exports = router;2.2 设置 CORS 与跨域数据访问
当前端与后端在不同域名时，必须开启 CORS，允许浏览器跨域访问。可以在 Koa 中使用中间件如 @koa/cors 来实现。
通过配置允许的来源、凭证等，可以确保前端在不同域名下仍能安全地获取数据。
下面给出一个常用的 CORS 设置示例，并附带一个完整的后端启动片段。
// 仅展示核心部分，实际需结合应用结构使用
const Koa = require('koa');
const cors = require('@koa/cors');
const Router = require('@koa/router');
const app = new Koa();
const router = new Router();app.use(cors({ origin: 'https://your-frontend-domain.com', credentials: true }));router.get('/api/items', ctx => {ctx.status = 200;ctx.body = { code: 0, data: { items: ['Apple', 'Banana', 'Cherry'] } };
});app.use(router.routes()).use(router.allowedMethods());app.listen(3000, () => console.log('Server running on http://localhost:3000'));3. Front-End 调用 Koa 接口的完整示例
3.1 GET 请求的简单示例
这是一个最简单的前端 GET 请求示例，目标是获取 /api/items 的数据并渲染到页面上。
首先确保后端已启动并允许跨域访问，前端则通过 fetch 发起请求并处理返回的 JSON。
下面的代码演示了请求、解析与渲染的完整流程：
async function loadItems(){const res = await fetch('http://localhost:3000/api/items', {method: 'GET',headers: { 'Accept': 'application/json' }});if (!res.ok) throw new Error(`HTTP ${res.status}`);const json = await res.json();// 假设页面存在一个元素用来显示项目const listEl = document.getElementById('item-list');listEl.textContent = (json.data.items || []).join(', ');
}
loadItems().catch(console.error);3.2 处理查询参数与分页
在实际应用中，接口往往带有查询参数，例如分页、筛选条件等。可以使用 URLSearchParams 来构造查询字符串。
以下示例展示了如何传递分页参数并处理返回结果：
async function fetchPage(page = 1){const url = `/api/items?page=${encodeURIComponent(page)}`;const res = await fetch(url, {headers: { 'Accept': 'application/json' }});if (!res.ok) throw new Error(res.statusText);return res.json();
}4. 解析数据格式与性能优化
4.1 解析 JSON 数据
最常见的接口返回格式是 JSON。使用 Response.json() 可以将响应体直接解析为 JavaScript 对象。
在高并发场景中，应尽量将数据解析与渲染分离，避免阻塞 UI 线程。
示例：直接将解析结果用于页面渲染。
const data = await (await fetch('/api/items')).json();
console.log(data.data.items);4.2 处理文本、Blob、ArrayBuffer
除了 JSON，还可能需要获取纯文本、二进制数据等格式。response.text()、response.blob()、response.arrayBuffer() 提供了对应的解析能力。
对于图片、视频等二进制数据，可以使用 Blob 或 ArrayBuffer 进行处理或下载。
示例代码如下：
const text = await (await fetch('/api/message')).text();
const imageBlob = await (await fetch('/api/image.png')).blob();5. 端到端示例：前后端协作的完整流程
5.1 Koa 后端实现 /api/items
这是一个完整的后端实现片段，提供一个可直接用于前端获取的列表接口。
// 完整后端示例片段
const Koa = require('koa');
const Router = require('@koa/router');
const cors = require('@koa/cors');
const app = new Koa();
const router = new Router();router.get('/api/items', ctx => {ctx.status = 200;ctx.body = { code: 0, data: { items: ['Apple', 'Banana', 'Cherry'] } };
});app.use(cors());
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => console.log('Server running on http://localhost:3000'));5.2 前端实现调用并渲染
前端需要对后端接口进行调用并将数据渲染到页面，结合上面的示例可以实现一个简单的页面展示逻辑。
以下示例展示了从后端获取数据、解析 JSON，并将结果渲染到页面的完整流程：
async function renderItems(){const res = await fetch('http://localhost:3000/api/items', {method: 'GET',headers: { 'Accept': 'application/json' }});if (!res.ok) return console.error('请求失败：', res.status);const json = await res.json();const listEl = document.getElementById('item-list');listEl.innerHTML = '';(json.data.items || []).forEach(item => {const li = document.createElement('li');li.textContent = item;listEl.appendChild(li);});
}
renderItems();