10 个原生 Web API 替代 JS 库

原生Web API：10个替代热门JS库的方案

Fetch取代Axios、jQuery.ajax等库。自2017年起，所有现代浏览器均支持，具备Promise、流式处理及全部HTTP方法功能。

Axios示例：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

const { data: users } = await api.get('/users');

原生替代方案：

const BASE_URL = 'https://api.example.com';

const res = await fetch(`${BASE_URL}/users`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const users = await res.json();

const res2 = await fetch(`${BASE_URL}/users`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Marvel', role: 'developer' })
});
const newUser = await res2.json();

支持取消请求，使用AbortController：

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort();

何时使用库？ 在大型项目中需要拦截器、重试逻辑或集中认证时。

FormData实现表单序列化

FormData自动收集表单数据（含文件），无需手动解析。自2015年起可用。

无需手动处理：

const formData = new FormData(form);

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
});

程序化创建：

const formData = new FormData();
formData.append('name', 'Marvel');
formData.append('avatar', fileInput.files[0]);

浏览器会自动设置multipart/form-data并添加边界符。

局限性： 无内置验证或多步表单状态管理——此时建议使用React Hook Form或Formik。

URL与URLSearchParams解析链接

原生URL和URLSearchParams类取代正则表达式及URL.js等库。自2018年起全面支持。

const url = new URL('https://example.com/search?q=web+apis&page=2&sort=recent#results');

url.hostname; // 'example.com'
url.searchParams.get('q'); // 'web apis'

url.searchParams.set('page', '3');
url.searchParams.append('filter', 'new');
console.log(url.toString());

生成查询字符串：

const params = new URLSearchParams({ q: 'hello world', page: '1' });
params.toString(); // 'q=hello+world&page=1'

自动编码/解码，避免解析错误。

Popover API实现浮动元素

截至2025年1月（Chrome 114+、Firefox 125+、Safari 17+），Popover API可实现提示框、下拉菜单和弹出层，无需Floating UI或Tippy.js。

HTML结构：

<button popovertarget="my-popover">切换弹出层</button>
<div id="my-popover" popover>弹出层内容</div>

程序化控制：

const popover = document.querySelector('#my-popover');
popover.showPopover();
popover.hidePopover();

样式设置：

#my-popover:popover-open {
  animation: fadeIn 0.2s ease-out;
}
#my-popover::backdrop {
  background: rgba(0, 0, 0, 0.15);
}

内置顶层支持、轻量关闭（Esc键或点击外部）、焦点锁定和键盘导航。

popover="auto" —— 自动关闭；popover="manual" —— 手动关闭。

库更优的情况： 需要通过中间件（如flip、shift）实现精确定位时。

原生API的优势

转向内置接口带来以下好处：

• 零打包体积 —— API属于浏览器引擎本身
• 性能优越 —— 可在主线程外执行
• 维护简便 —— 由浏览器厂商更新
• 兼容性强 —— 支持Node.js（可用时）
• 安全更高 —— 无第三方代码引入漏洞

关键要点

• 原生API覆盖80–90%常见任务，显著减少依赖
• Fetch + AbortController完全替代基础HTTP客户端
• FormData无需库即可处理95%的表单上传场景
• URLSearchParams消除正则表达式相关的解析错误
• Popover API统一可访问性UI组件标准

这些接口让中高级项目优化成为可能，同时不牺牲功能完整性。

— Editorial Team