api.js

API.js 详解指南

API.js

什么是 API.js？

API.js 是一个轻量级的 JavaScript 库，用于简化 HTTP 请求操作，它封装了 XMLHttpRequest 和 fetch 的底层实现，提供更友好的接口，支持 Promise 模式，适用于前端与后端的数据交互场景。

核心特性

特性	说明
Promise 支持	返回 Promise 对象，支持 .then() 和 .catch() 链式调用
自动 JSON 转换	请求时自动将对象转为 JSON，响应时自动解析 JSON 数据
拦截器机制	支持请求前和响应后的全局拦截（类似 Axios）
超时控制	可设置请求超时时间
取消请求	支持通过 AbortController 取消未完成的请求

---

核心功能详解

HTTP 请求方法

方法名	说明	示例调用
get	发送 GET 请求	API.get('/api/user')
post	发送 POST 请求	API.post('/api/login', {username, password})
put	发送 PUT 请求	API.put('/api/user/1', {name: 'John'})
delete	发送 DELETE 请求	API.delete('/api/user/1')

通用配置选项

配置项	类型	说明
baseURL	string	基础路径（所有请求会拼接此路径）
timeout	number	请求超时时间（单位：毫秒）
headers	object	自定义请求头（如 {'Authorization': 'Bearer token'}）
withCredentials	boolean	是否携带凭证（Cookie）

---

使用方法

安装与引入

# 通过 npm 安装
npm install api.js

// 引入并配置
import API from 'api.js';
API.config({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

基本请求示例

GET 请求

API.get('/users')
  .then(data => {
    console.log('用户列表:', data);
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

POST 请求

API.post('/login', { username: 'admin', password: '123456' })
  .then(data => {
    console.log('登录成功:', data);
  })
  .catch(error => {
    console.error('登录失败:', error);
  });

高级用法

设置拦截器

// 添加请求拦截器
API.interceptors.request.use(config => {
  config.headers['X-Custom-Header'] = 'my-header';
  return config;
});
// 添加响应拦截器
API.interceptors.response.use(response => {
  if (response.status === 401) {
    window.location.href = '/login'; // 未授权跳转登录页
  }
  return response;
});

取消请求

const controller = new AbortController();
API.get('/large-file', { signal: controller.signal })
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    }
  });
// 触发取消
controller.abort();

---

优势与局限性

优势

• 轻量级：体积仅 ~5KB，适合移动端或对性能敏感的场景。
• 链式调用：支持 Promise 链式操作，代码更简洁。
• 灵活扩展：通过拦截器实现全局配置（如统一添加 token）。
• 浏览器兼容：支持 IE10+ 及现代浏览器。

局限性

• 无数据缓存：需手动实现缓存逻辑。
• 有限功能：相比 Axios，缺少内置的表单数据处理、文件上传等高级功能。
• 依赖环境：部分功能（如 fetch）在低版本浏览器中需 polyfill。

---

常见问题与解答

Q1：如何处理跨域问题？

A：跨域问题需服务器端配合设置 Access-Control-Allow-Origin，API.js 本身无法绕过跨域限制，但可通过代理服务器（如 Nginx）或后端 CORS 配置解决。

Q2：如何在低版本浏览器中使用 API.js？

A：低版本浏览器（如 IE10）可能不支持 Promise，需引入 polyfill（如 es6-promise）或使用回调函数替代 `

到此，以上就是小编对于“api.js”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。