17370845950

JavaScript 集成第三方 API 的核心是使用 fetch 或 XMLHttpRequest 发起请求、处理响应，并安全稳定地使用结果，关键在于认证方式、请求结构、错误处理和跨域限制。

JavaScript 与第三方 API 集成，核心是通过 fetch 或 XMLHttpRequest 发起 HTTP 请求，处理响应数据，并在前端安全、稳定地使用结果。关键在于理解认证方式、请求结构、错误处理和跨域限制。

确认 API 文档与基础请求格式

集成前必须仔细阅读目标 API 的文档，重点关注：

• 请求地址（endpoint）、支持的 HTTP 方法（GET/POST/PUT 等）
• 是否需要认证（如 API Key、Bearer Token、OAuth 流程）
• 请求头要求（例如 Content-Type: application/json、Authorization）
• 请求参数是放在 URL 查询字符串、请求体（body），还是请求头中
• 响应数据结构（通常是 JSON）及常见错误码（如 401、429）

用 fetch 发起带认证的 GET 请求

这是最常见场景，比如调用天气或新闻 API：

const API_KEY = 'your_api_key_here';
const url = `https://api.example.com/data?city=beijing`;

fetch(url, {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json'
  }
})
.then(res => {
  if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
  return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err));

处理 CORS 与前端限制

浏览器会阻止跨域请求（除非 API 明确允许）。常见应对方式：

• 确认 API 是否支持 CORS：检查响应头是否有 Access-Control-Allow-Origin: * 或指定域名
• 避免在前端硬编码敏感凭证（如私钥、后台 token）——应由后端代理转发请求
• 开发时可用本地代理（如 Vite/webpack devServer 的 proxy 配置）绕过浏览器限制
• 某些 API 提供 JSONP（已逐渐淘汰）或客户端 SDK，可简化集成

封装可复用的 API 调用函数

提升可维护性，统一处理加载状态、错误提示和重试逻辑：

async function callApi(endpoint, options = {}) {
  const defaultOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      ...options.headers
    },
    ...options
  };

  try {
    const res = await fetch(endpoint, defaultOptions);
    if (!res.ok) {
      const errorData = await res.json();
      throw new Error(errorData.message || `请求失败: ${res.status}`);
    }
    return await res.json();
  } catch (err) {
    console.error('API 调用异常:', err);
    throw err;
  }
}

// 使用示例
callApi('https://api.example.com/users')
  .then(users => renderUserList(users))
  .catch(showErrorToast);

基本上就这些。不复杂但容易忽略细节——尤其是认证方式和错误边界处理。实际项目中建议配合 TypeScript 类型定义 + 请求拦截器（如用 axios 或自建 hook）进一步提升健壮性。