← 返回目录

Web APIs 实战：Fetch、Storage 与 Geolocation

高级 · 第 8 篇 ·

浏览器 API 概览

浏览器为 JavaScript 提供了大量原生 API，无需第三方库就能实现网络请求、本地存储、地理位置等功能。

Fetch API：网络请求

// GET 请求
async function getUsers() {
  const response = await fetch('https://api.example.com/users');
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const users = await response.json();
  console.log(users);
}

// POST 请求
async function createUser(name, email) {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email }),
  });
  return await response.json();
}

请求取消

const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') console.log('请求已取消');
  });

setTimeout(() => controller.abort(), 5000); // 5秒后取消

Storage API：本地存储

// localStorage（持久存储）
localStorage.setItem('user', JSON.stringify({ name: 'Tom' }));
const user = JSON.parse(localStorage.getItem('user'));
localStorage.removeItem('user');

// sessionStorage（会话存储，关闭标签页后清除）
sessionStorage.setItem('token', 'abc123');

实用封装

const storage = {
  get(key) {
    try {
      const value = localStorage.getItem(key);
      return value ? JSON.parse(value) : null;
    } catch { return null; }
  },
  set(key, value) {
    try { localStorage.setItem(key, JSON.stringify(value)); }
    catch (e) { console.error('存储失败:', e); }
  },
  remove(key) { localStorage.removeItem(key); },
};

Geolocation API：地理位置

navigator.geolocation.getCurrentPosition(
  (position) => {
    const { latitude, longitude } = position.coords;
    console.log(`纬度: ${latitude}, 经度: ${longitude}`);
  },
  (error) => {
    console.error('位置获取失败:', error.message);
  },
  { enableHighAccuracy: true, timeout: 10000 }
);

其他常用 API

// 剪贴板
await navigator.clipboard.writeText('要复制的文本');

// 懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

小结

Fetch、Storage 和 Geolocation 是前端最常用的浏览器 API。掌握它们可以在不依赖后端的情况下实现数据请求、本地持久化和位置服务。

下一篇：前端性能优化：加载、渲染与网络策略