Appearance
网络请求
系统的网络请求通过 Axios 实现,我们对其进行了额外的封装:
- 自动携带身份
token - 可选的请求
loading - 自动取消重复请求
- 自动错误/成功提示
- 异常处理
- 请求/响应数据
key的命名方式转换
TIP
- 在
ai-go-admin的/web/src/api/目录,存放了系统所有的网络请求函数,我们也建议您将封装的请求函数放置于此目录下。 - 封装的
request公共函数无法满足您的使用场景时,当然是可以直接使用axios.create的,封装是为了方便使用,不是限制。
Axios 封装代码位于:/src/utils/request.ts,通常您参考如下签名创建请求即可:
ts
request(axiosConfig: AxiosRequestConfig, options: Options = {}): Promise使用示例
基本:
ts
import request from '@/utils/request'
export function ping() {
return request({
url: '/ping',
method: 'GET',
})
}
// 然后就可以在任意组件内导入 ping 函数使用
ping().then((res) => {
console.log(res)
})自定义请求响应数据类型:
ts
export function upload() {
// 可得到更好的类型支持,本操作是可选的
return request<UploadResult>({
url: '/common/upload',
method: 'POST',
})
}参数解释
参数一:axiosConfig
axiosConfig 参数用于配置:Axios 创建请求时自带的可用配置选项,可用配置项 请参考Axios网站,只有 url 是必需的,默认请求方法为 GET。
ts
createAxios({
url: '/ping',
method: 'GET',
timeout: 3000, // 请求超时毫秒数,可覆盖默认的超时设定
// ...
})参数二:options
options 参数可以传递以下可用选项:
| 选项名 | 默认值 | 注释 |
|---|---|---|
| cancelDuplicate | true | 是否开启取消重复请求(连续的重复请求会被自动取消,以请求时参数计算唯一性判定 KEY) |
| showErrorMessage | true | 是否开启 code!=0 时的信息直接提示(比如操作失败直接弹窗提示接口返回的消息,就不需要再写代码弹窗提示了) |
| showSuccessMessage | false | 是否开启 code=0 时的信息直接提示 |
| showNetworkErrorMessage | true | 是否开启接口网络错误信息直接提示,如 接口404 |
| loading | false | 是否开启全局 loading 层效果 |
| convertCase | false | 是否做数据 key 的命名方式转换(请求 camelCase → snake_case,响应 snake_case → camelCase) |
| replaceCustomAdminPath | true | 是否替换自定义后台入口路径前缀 |
