当前位置：首页 > news >正文

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

news 来源：原创 2025/6/24 14:33:33

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

// 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

使用的时候：

import http from './request'

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

在cocos启动的时候就执行：