axios-easyconf/README.md

基于axios的轻量级二次封装库，支持自动协议匹配、简化拦截器配置、自动挂载 WebSocket 地址。

# 📦 axios-easyconf

> 🌐 基于 `axios` 的轻量级二次封装库，支持自动协议匹配、简化拦截器配置、自动挂载 WebSocket 地址。



## ✨ 特性

- ✅ 自动根据当前页面协议（http/https）动态替换 `baseURL` 协议。
- ✅ 支持传入请求/响应拦截器函数数组，无需`interceptors.request.use`形式配置。
- ✅ 快速获取基于 baseURL 的 WebSocket URL，无需单独配置。（根据 baseURL 自动生成并 WebSocket URL 挂载到实例上）
- ✅ 完全兼容原生 `axios` 的 `create` 配置方式。
- ✅ 零侵入，可按需使用。

------



## 📦 安装

```
npm i axios-easyconf
```

------



## 🚀 快速使用

```javascript
import AxiosEConf from 'axios-easyconf'

const request = AxiosEConf.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
  autoProtocol: true, // ✅ 开启自动协议替换（根据网页协议 http/https）
  beforeRequest: [
    (config) => {
      // 请求拦截器逻辑
      console.log('请求前:', config)
      return config
    },
    (error) => Promise.reject(error)
  ],
  beforeResponse: [
    (response) => {
      // 响应拦截器逻辑
      console.log('响应数据:', response)
      return response
    },
    (error) => Promise.reject(error)
  ]
})

export default request
```

```TypeScript
import AxiosEConf from "axios-easyconf";
import type { InternalAxiosRequestConfig, AxiosResponse } from 'axios-easyconf'

const request = AxiosEConf.create({
  baseURL: "http://api.example.com",
  autoProtocol: true,
  timeout: 5000,
  beforeRequest: [
    (config: InternalAxiosRequestConfig) => {
      // 请求拦截器逻辑
      console.log('请求前:', config)
      return config;
    },
    (error: any) => {
      return Promise.reject(error);
    },
  ],
  beforeResponse: [
    (response: AxiosResponse) => {
      // 响应拦截器逻辑
      console.log('响应数据:', response)
      return response;
    },
    (error: any) => {
      return Promise.reject(error);
    },
  ],
});

export default request
```

``` javascript
// 发起请求
request.get('/users')

// 获取 WebSocket 地址
console.log(request.WS_URL) // 如: ws://api.example.com

// 获取 baseURL 地址
console.log(request.BASE_URL) // 如: http://api.example.com
```



## ⚙️ 配置说明

完全支持`axios.create()`所有参数，额外增加以下配置

| 配置项           | 类型       | 描述                                                         |
| ---------------- | ---------- | ------------------------------------------------------------ |
| `autoProtocol`   | `boolean`  | 是否启用协议自动切换（根据当前网页是 http/https）            |
| `beforeRequest`  | `[fn, fn]` | 请求拦截器（数组形式，第一个处理请求成功，第二个处理请求异常） |
| `beforeResponse` | `[fn, fn]` | 响应拦截器（数组形式，第一个处理响应成功，第二个处理响应异常） |



## 🔁 返回实例说明

`AxiosEConf.create()` 返回的实例完全兼容原生 `axios` 实例，拥有 `get/post/put/delete` 等所有请求方法。

同时，实例对象扩展了以下属性：

| 属性名     | 类型     | 描述                            |
| ---------- | -------- | ------------------------------- |
| `WS_URL`   | `string` | 自动生成并挂载的 WebSocket 地址 |
| `BASE_URL` | `string` | baseURL                         |



## ⚡ WS_URL 自动挂载规则

创建实例后，会自动根据 `baseURL` 或 `window.location.origin` 生成对应的 WebSocket 地址，并挂载到 `request.WS_URL` 上。

- 如果 `baseURL` 存在 → 替换 `http` → `ws`
- 否则使用 `window.location.origin` 替换 `http` → `ws`



## 🧷其他说明

目前 `AxiosEConf` 仅提供 `create()` 方法，可以通过解构方式直接导入使用：

```javascript

import { createRequest } from 'axios-easyconf'

const request = createRequest({ /* 配置 */ })
```