api-plus

安装

npm i api-plus -S

yarn add api-plus -S

pnpm i api-plus -S

通过 CDN 使用

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

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

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

全局使用

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

<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 模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 Vue：

<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 来导入，但在文档的其余部分中，你将看到如下代码：

import apiPlus from 'api-plus'

我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 apiPlus：

<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 来进行 polyfill。

基础使用

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

全局配置

import apiPlus from 'api-plus'
const { transform } = new apiPlus({
    handleError?: handleError
    handleResponse?: handleResponse
    requestMethods?: Object
    domain?: Domain,
    axiosConfig?: AxiosRequestConfig
})

• handleError

请求错误处理

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

• handleResponse

请求成功处理

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

• requestMethods

自定义请求方法

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

• domain

请求域名, 默认当前域名

object | string | function

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

• axiosConfig

axios 配置

请求 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 参数配置

import apiPlus from 'api-plus'

const { transform } = new apiPlus()

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