HttpService - 基于 Axios 的封装工具（带拦截器）

该项目提供了一个封装 axios 库的类 HttpService，为 JavaScript 或 Vue.js 应用程序提供一种结构化、可复用的 HTTP 请求处理方式。该封装工具包括：

• 全局请求和响应拦截器。
• 支持认证 Token，并为非白名单内的请求自动添加 Authorization 头。
• 自定义基础 URL。
• 请求超时配置。
• 支持 GET、POST、PUT、DELETE 等常用方法。
• 单例模式，确保每个 baseURL 只有一个实例被创建。

功能特性

1. 请求拦截器：会自动从本地存储中（通过 kaka-localstorage 库）附加 Token 到请求头中，除非请求 URL 在白名单中。
2. 响应拦截器：处理响应的成功和失败情况，成功时返回 response.data，失败时返回结构化的错误信息。
3. 支持多个 Base URL：你可以通过提供不同的 baseURL 来创建不同的服务实例。
4. Token 管理：你可以自定义存储 Token 的键名。
5. 可配置的设置项：例如请求超时、Token 键名、是否启用响应拦截等都可以自定义。

安装

通过 npm 安装依赖：

npm install kaka-axios --save

使用方法

1. 创建 HttpService 实例

你可以通过提供 baseURL、请求白名单（可选）和配置项（可选）来创建 HttpService 的实例。

import createHttpService from './path-to-http-service'

// 示例：创建一个默认配置的服务实例
const apiService = createHttpService('https://api.example.com', ['/auth/login'], {
	timeout: 15000, // 设置超时时间为 15 秒
	tokenKey: 'my_custom_token_key', // 自定义 token 键名
	enableResponseInterception: true, // 启用响应拦截器
})

2. 使用实例发送请求

创建 HttpService 实例后，你可以使用它来发送 HTTP 请求（GET、POST、PUT、DELETE）。

GET 请求

apiService
	.get('/user/profile', { userId: 123 })
	.then((response) => {
		console.log('用户资料:', response)
	})
	.catch((error) => {
		console.error('获取资料时发生错误:', error)
	})

POST 请求

apiService
	.post('/user/login', { username: 'john', password: 'password123' })
	.then((response) => {
		console.log('登录成功:', response)
	})
	.catch((error) => {
		console.error('登录失败:', error)
	})

PUT 请求

apiService
	.put('/user/profile', { userId: 123, name: 'John Doe' })
	.then((response) => {
		console.log('资料更新成功:', response)
	})
	.catch((error) => {
		console.error('更新资料时发生错误:', error)
	})

DELETE 请求

apiService
	.delete('/user/profile', { userId: 123 })
	.then((response) => {
		console.log('删除资料成功:', response)
	})
	.catch((error) => {
		console.error('删除资料时发生错误:', error)
	})

3. 自定义配置

你可以通过在创建 HttpService 实例时传入不同的选项来自定义配置。

const customService = createHttpService('https://api.custom.com', ['/public/resource'], {
	timeout: 20000, // 20 秒超时
	tokenKey: 'custom_access_token', // 自定义 token 键名
	enableResponseInterception: false, // 禁用响应拦截器
})

4. 处理响应

默认情况下，成功的请求会返回 response.data。对于错误请求，服务会返回如下格式的错误信息：

{
	"message": "Not Found 接口不存在",
	"code": 404
}

示例流程

1. 使用 GET、POST、PUT、DELETE 方法发送请求。
2. 请求拦截器会检查 URL 是否在白名单中，如果不在白名单中，则从本地存储中获取 Token 并添加到请求头中。
3. 响应拦截器会处理响应，如果成功则返回 response.data，如果失败则返回结构化的错误信息。

许可证

该项目是开源的，您可以根据需要进行修改和使用。