#### 安装

```shell
npm i api-plus -S

yarn add api-plus -S

pnpm i api-plus -S

```

#### 通过 CDN 使用

你可以借助 script 标签直接通过 CDN 来使用 api-plus:

```html
<script src="https://unpkg.com/api-plus/lib/api-plus.global.js"></script>
```

这里我们使用了 [unpkg](https://unpkg.com/)，但你也可以使用任何提供 npm 包服务的 CDN，例如 [jsdelivr](https://www.jsdelivr.com/package/npm/api-plus) 或 [cdnjs](https://cdnjs.com/libraries/api-plus)。当然，你也可以下载此文件并自行提供服务。


#### 全局使用

上面的例子使用了全局构建版本的 `api-plus`，该版本的所有顶层 API 都以属性的形式暴露在了全局的 `apiPlus` 对象上。这里有一个使用全局构建版本的例子：

```html
<script src="https://unpkg.com/api-plus/lib/api-plus.global.js"></script>

<script>
    const { transform } = new apiPlus()
    const userApi = transform({
        userInfo: '[get]userInfo'
    })
    const result = userApi.userInfo() // Promise
</script>
```

#### 使用 ES 模块

在本文档的其余部分我们使用的主要是 [ES 模块](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules)语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

```html
<script type="module">
import apiPlus from 'https://unpkg.com/api-plus/lib/api-plus.esm-browser.js'

const { transform } = new apiPlus()
const userApi = transform({
    userInfo: '[get]userInfo'
})
const result = userApi.userInfo() // Promise
</script>

```

注意我们使用了 `<script type="module">`，且导入的 CDN URL 指向的是 `api-plus` 的 ES 模块构建版本。


#### 启用 Import maps
在上面的示例中，我们使用了完整的 CDN URL 来导入，但在文档的其余部分中，你将看到如下代码：

```js
import apiPlus from 'api-plus'
```

我们可以使用导入[映射表 (Import Maps)](https://caniuse.com/import-maps) 来告诉浏览器如何定位到导入的 apiPlus：

```html
<script type="importmap">
{
    "imports": {
        "api-plus": "https://unpkg.com/api-plus/lib/api-plus.esm-browser.js"
    }
}
</script>


<script type="module">
import apiPlus from 'api-plus'
const { transform } = new apiPlus()
const userApi = transform({
    userInfo: '[get]userInfo'
})
const result = userApi.userInfo() // Promise
</script>

```

> 目前只有基于 Chromium 的浏览器支持导入映射表，所以我们推荐你在学习过程中使用 Chrome 或 Edge。
如果你使用的是 Firefox 浏览器，则该功能仅在 102+ 版本中受支持，且目前需要启用 `about:config` 中的 `dom.importMaps.enabled` 选项。
如果你更喜欢那些还不支持导入映射表的浏览器，你可以使用 [es-module-shims](https://github.com/guybedford/es-module-shims) 来进行 polyfill。

#### 基础使用

```js
import apiPlus from 'api-plus'

const { transform } = new apiPlus()

const userApi = transform({
    getUserList: '[post]/user/list/' //请求地址转换成 => http://当前域名/user/list/
})
const payload = { // 请求参数
    username: 'tangxiaomi',
    userId: 123
}
const result = userApi.userInfo(payload) // Promise

```

#### 全局配置

```js
import apiPlus from 'api-plus'
const { transform } = new apiPlus({
    handleError?: handleError
    handleResponse?: handleResponse
    requestMethods?: Object
    domain?: Domain,
    axiosConfig?: AxiosRequestConfig
})
```
* handleError 
  
请求错误处理

```js
const { transform } = new apiPlus({
    handleError: (err) => {
        console.log('err: ', err);
    }
})
```

* handleResponse
  
请求成功处理

```js
const { transform } = new apiPlus({
    handleResponse: (result) => {
        console.log('result: ', result);
    }
})
```

* requestMethods
  
自定义请求方法

```js
const { transform } = new apiPlus({
    requestMethods: {
        supotGet: () => { // '[supotGet]/user/list/'
        }
    }
})
  ```

* domain
  
请求域名, 默认当前域名

`object | string | function`

```js
const { transform } = new apiPlus({
    domain: 'http:http://www.example.com'
})
```

* axiosConfig
  
[axios 配置](https://www.axios-http.cn/docs/req_config)



#### 请求 url 配置规则

```
[get]<domain>/user/list/:username/userId\?
 ─┬─   ─┬─   ─────┬────  ───┬──── ───┬───
  │     │         │         │        │ 
  │     │         │         │     可选参数(类似vue-router匹配规则)
  │     │         │      接口参数
  │     │         │    
  │     │      接口地址
  │  请求域名
  │     
请求方法(get | post | delete...)

/user/list 转换成 => http://www.example.com/user/list  发送get请求
[get]user/list =>  转换成 => http://www.example.com/user/list  发送get请求
[post]user/list =>  转换成 => http://www.example.com/user/list  发送post请求
[post]user/list/:username =>  转换成 => http://www.example.com/user/list/tangxiaomi  发送post请求 需要传入参数 username

```

#### url 参数配置

```js
import apiPlus from 'api-plus'

const { transform } = new apiPlus()

const userApi = transform({
    getUserList: '[post]user/list/:username'
})
const result = userApi.getUserList({
    username: 'tangxiaomi'
})

```