如何添加ofetch/$fetch请求选项？如何为默认选项添加类型？

问题1：如何添加ofetch/$fetch的请求选项？ #

你可以按以下步骤添加自定义请求选项：

• 先定义包含自定义业务字段的扩展类型，比如示例里的skipAuthTokenProcessing、preventLogout
• 在请求拦截器（如onRequest）中，直接通过options对象设置自定义选项的值
• 调用封装后的api实例时，在请求配置参数里直接传入自定义选项

关键实现代码：

// 定义扩展选项类型
type ApiFetchOptionsExtra = {
    skipAuthTokenProcessing?: boolean
    preventLogout?: boolean
}

const api = $fetch.create({
    baseURL: apiUrl,
    async onRequest({ options }) {
        // 在拦截器中设置自定义选项
        options.preventLogout = true
        // ...其他业务逻辑
    },
    // ...其他拦截器配置
})

// 调用api时传入自定义选项
api('asd', {
    body: {},
    preventLogout: true
})

问题2：如何为默认选项添加类型，使其能够正确显示？ #

要让自定义选项获得完整的类型提示，通过交叉类型合并原生类型与自定义类型即可：

1. 导入ofetch原生的FetchOptions类型
2. 用交叉类型（&）将原生类型和自定义扩展类型合并，得到包含所有选项的新类型ApiFetchOptions
3. 可选：创建$fetch实例时显式指定该类型，确保拦截器和调用环节的类型校验完全生效

类型配置示例：

import type { FetchOptions } from 'ofetch'

type ApiFetchOptionsExtra = {
    skipAuthTokenProcessing?: boolean
    preventLogout?: boolean
}

// 交叉合并原生类型与自定义类型
type ApiFetchOptions = FetchOptions & ApiFetchOptionsExtra

// 显式指定实例类型，获得完整类型提示
const api = $fetch.create<ApiFetchOptions>({
    baseURL: apiUrl,
    async onRequest({ options }) {
        // 此时options会包含自定义字段的类型提示
        options.preventLogout = true
        // ...
    },
    // ...
})

这样不管是在拦截器中操作options，还是调用api时传入配置，都能获得正确的类型补全和校验。

内容的提问来源于stack exchange，提问作者Ilya Degtyarenko