代码拉取完成，页面将自动刷新
WebNuxt 的网络请求并未使用 Axios，而是使用了 Nuxt3 推荐的方式，我们对 useFetch 和 $fetch 进行了封装，使它们具有了有以下特点：
tokenLoadingWebNuxt 的 /api 目录，存放了系统所有的网络请求函数，我们也建议您将封装的请求函数放置于此目录下。Http.fetch 通常用于获取数据后渲染组件（服务端预渲染获取数据），Http.$fetch 则通常用于用户交互后发出请求（组件已经渲染后才会发送的请求，比如用户点击）Http.fetch 和 Http.$fetch 无法满足您的使用场景时，当然是可以直接使用 useFetch、$fetch 的，我们对其封装只是为了方便使用。Http.fetch 和 Http.$fetch 请求参数几乎一致，只是响应数据结构不一样，分别是 res.data.value 和 res封装的 Http.fetch 和 Http.$fetch 的封装代码位于 /utils/request.ts，但通常您参考如下方式创建请求即可：
Http.fetch<DataT = any>(options: FetchOptions<DataT>, config: Partial<FetchConfig> = {}, loading: LoadingOptions = {}): Promise<AsyncData<ApiResponse<DataT>, FetchError | null>>
Http.$fetch<DataT = any>(options: NitroFetchOptions, config: Partial<FetchConfig> = {}, loading: LoadingOptions = {}): Promise<ApiResponse<DataT>>
Http.fetch 使用示例/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），进 catchawait 的方式发送请求，前台用户点击才发生的请求则随意Http.$fetch 使用示例它的参数于以上的 Http.fetch 几乎一致
/api/common.ts 文件
/**
* 请求发送短信函数
*/
export function sendSms(mobile: string) {
return Http.$fetch(
{
url: apiSendSms,
method: 'POST',
body: {
mobile: mobile,
},
},
{
showSuccessMessage: true,
}
)
}
然后就可以在其他文件内
import { sendSms } from '~/api/common'
sendSms(18888888888)
.then((res) => {
if (res.code == 1) {
console.log('发送成功')
}
})
.finally(() => {
console.log('请求完成')
})
options: FetchOptions<DataT>options 参数用于配置 useFetch 的请求参数，如 url、method、query、body、headers 等等，详细文档，您也可以直接查看类型定义。
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 === 1 时的信息直接提示 |
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 的配置，所有可用配置项，请参考官方文档。
export function initialize() {
// 定义了接口响应的 data 类型
return Http.fetch<{ user: any }>(
{
url: indexUrl,
method: 'get',
params: {
params1: 11,
},
lazy: true,
},
{
loading: true,
},
{
text: '正在全力加载中...',
}
)
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手