api.js
封装异步请求逻辑,支持 GET/POST 方法,内置错误处理与响应数据格式化,适配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”的问题就介绍到这了,希望介绍的几点解答对大家有用,有任何问题和不懂的,欢迎各位朋友在评论区讨论,给我留言。
【版权声明】:本站所有内容均来自网络,若无意侵犯到您的权利,请及时与我们联系将尽快删除相关内容!
发表回复