# 网络请求
WebNuxt
的网络请求并未使用Axios
,而是使用了Nuxt3
推荐的方式 (opens new window),我们对useFetch
进行了封装,它有以下特点:
- 自动携带会员
token
- 自动携带当前语言
- 可选的 Loading
- 自动错误/成功提示
TIP
1、在WebNuxt
的/api
目录,存放了系统所有的网络请求函数,我们也建议您将封装的请求函数放置于此目录下。
2、封装的Http.fetch
无法满足您的使用场景时,当然是可以直接使用useFetch、$fetch
的,我们对其封装只是为了方便使用。
Http.fetch
的封装代码位于/utils/request.ts
,但通常您参考如下方式创建请求即可:
Http.fetch(options: FetchOptions<DataT>, config: Partial<FetchConfig> = {}, loading: LoadingOptions = {}): Promise<_AsyncData<ApiResponse<DataT>, FetchError | null>>
# 使用示例
/api/common.ts
文件
/**
* 初始化请求函数
*/
export function initialize() {
return Http.fetch({
url: '/api/index/index',
method: 'get',
})
}
- 然后就可以在其他文件内
import { initialize } from '~/api/common'
const { data } = await initialize()
if (data.value?.code == 1) {
memberCenter.setStatus(data.value.data.openMemberCenter)
siteConfig.dataFill(data.value.data.site)
}
Http.fetch
的返回值与useFetch
是一样的,需要注意的是code != 1 仍然会进 then
,因为如果抛出异常,将导致服务端渲染时出错;另外有一些其他建议:
- 请在请求后判断
code == 1
才执行成功的逻辑 - 请求失败时
code != 1
,会自动弹出接口返回的错误消息,仍然进then
(可关闭弹窗) - 请求出错时,会自动弹出请求错误消息(如404),进
catch
- 服务端渲染建议使用
await
的方式发送请求,前台用户点击才发生的请求则随意
# 参数解释
# 参数一:options: FetchOptions<DataT>
options
参数用于配置useFetch
的请求参数,如url、method、query、body、headers
等等,详细文档 (opens new window),您也可以直接查看类型定义。
export function initialize() {
return Http.fetch({
url: '/api/index/index',
method: 'get',
params: {
params1: 11
},
lazy: true,
})
}
# 参数二:config: Partial<FetchConfig> = {}
config
参数可以传递以下可用选项:
选项名 | 默认值 | 注释 |
---|---|---|
loading | false | 是否开启loading 层效果 |
reductDataFormat | false | 是否开启简洁的数据结构响应(pick = ['data'] ) |
showErrorMessage | true | 是否开启请求错误信息直接提示,如404 |
showCodeMessage | true | 是否开启code!=0 时的信息直接提示(比如操作失败直接弹窗提示接口返回的消息,就不需要再写代码弹窗提示了) |
showSuccessMessage | false | 是否开启code=0 时的信息直接提示 |
export function initialize() {
// 定义了接口响应的 data 类型,此操作是可选的
return Http.fetch<{user: any}>(
{
url: indexUrl,
method: 'get',
params: {
params1: 11,
},
lazy: true,
},
{
loading: true,
}
)
}
# 参数三:loading: LoadingOptions = {}
我们封装了element plus
的loading
,此参数用于设置loading
的配置,所有可用配置项,请参考官方文档 (opens new window)。
export function initialize() {
// 定义了接口响应的 data 类型
return Http.fetch<{user: any}>(
{
url: indexUrl,
method: 'get',
params: {
params1: 11,
},
lazy: true,
},
{
loading: true,
},
{
text: '正在全力加载中...'
}
)
}