模仿axios的封装效果来封装fetch,实现baseurl超时等

因为要在cocos游戏项目里面发送网络请求获取数据,并且还有可能用到websocket发送请求,所以这里封装一个fetch放便使用:

javascript 复制代码
// fetch封装

// 基础配置
const BASE_URL = `你的url`
const TIMEOUT = 5000

// 请求封装
const http = async (url: string, options: RequestInit = {}): Promise<any> => {
    const controller = new AbortController()
    const timeoutId = setTimeout(() => controller.abort(), TIMEOUT)

    // 请求前置处理(请求拦截器)
    const finalOptions: RequestInit = {
        ...options,
        headers: {
            'Content-Type': 'application/json',
            ...(options.headers || {}),
        },
        signal: controller.signal,
    }

    try {
        const response = await fetch(BASE_URL + url, finalOptions)
        clearTimeout(timeoutId)
        const data = await response.json()
        // 响应拦截器逻辑
        if (data.code === 401) {
            if (window.location.href.indexOf('pad') !== -1) {
                return Promise.resolve({
                    code: 200,
                    data: { msg: '登录无效' },
                })
            } else {
                console.log('登录无效')
                return Promise.reject({
                    code: 401,
                    data: { msg: '登录无效' },
                })
            }
        } else if (data.code >= 400) {
            console.log('请求失败')
        }

        return Promise.resolve(data)
    } catch (error: any) {
        if (error.name === 'AbortError') {
            console.log('请求超时')
        } else {
            console.error('请求失败:', error)
            console.log('请求失败')
        }
        return Promise.reject(error)
    }
}

export default http

使用的时候:

javascript 复制代码
import http from './request'

export const getSelects = async () => {
    const data = await http('/carnival/clock_api/getlevelselect', {
        method: 'GET',
    })
    console.log('data--', data)
}

在cocos启动的时候就执行:

相关推荐
我命由我1234510 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
寒鸽子21 天前
js代码修改react框架的input的值-2025年6月
js
我命由我1234525 天前
VSCode - VSCode 让未被编辑的标签页不被自动关闭
前端·javascript·ide·vscode·编辑器·html·js
海上彼尚1 个月前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
冷凌爱1 个月前
Fetch与Axios:区别、联系、优缺点及使用差异
前端·node.js·js
outstanding木槿1 个月前
现实生活例子[特殊字符] 通俗易懂的解释[特殊字符] JS中的原型和原型链[特殊字符]
前端·javascript·js
potender1 个月前
前端基础学习html+css+js
前端·css·学习·html·js
漫步企鹅1 个月前
【JS服务器】JETBRAINS IDEs JS服务器使用什么编译JNI
js·jni·网站服务器
站在风口的猪11081 个月前
React前端框架
前端·react.js·前端框架·js
西洼工作室1 个月前
【手搓一个原生全局loading组件解决页面闪烁问题】
前端·css·js