uniapp请求超时处理

uniapp请求超时处理方法

在uniapp中处理请求超时可以通过多种方式实现，以下是几种常见的处理策略：

设置全局请求超时时间

在main.js中配置全局请求超时时间，适用于所有请求：

uni.$http.setConfig((config) => {
    config.timeout = 10000 // 10秒超时
    return config
})

单个请求设置超时

在具体请求中单独设置超时时间：

uni.request({
    url: 'https://example.com/api',
    timeout: 5000, // 5秒超时
    success: (res) => {},
    fail: (err) => {
        if(err.errMsg.includes('timeout')) {
            uni.showToast({title: '请求超时', icon: 'none'})
        }
    }
})

使用拦截器处理超时

通过请求拦截器统一处理超时错误：

uni.$http.interceptors.request.use(
    (config) => {
        config.timeout = 8000 // 8秒超时
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

uni.$http.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        if(error.errMsg.includes('timeout')) {
            uni.showModal({
                title: '提示',
                content: '网络请求超时，请重试'
            })
        }
        return Promise.reject(error)
    }
)

重试机制实现

对于超时请求可以实现自动重试逻辑：

function requestWithRetry(url, data, retryCount = 3) {
    return new Promise((resolve, reject) => {
        const doRequest = (attempt) => {
            uni.request({
                url,
                data,
                timeout: 3000,
                success: resolve,
                fail: (err) => {
                    if(err.errMsg.includes('timeout') && attempt < retryCount) {
                        doRequest(attempt + 1)
                    } else {
                        reject(err)
                    }
                }
            })
        }
        doRequest(1)
    })
}

网络状态检测

在发起请求前先检测网络状态：

uni.getNetworkType({
    success: (res) => {
        if(res.networkType === 'none') {
            uni.showToast({title: '网络不可用', icon: 'none'})
            return
        }
        // 正常发起请求
    }
})

显示加载状态

结合加载提示改善用户体验：

let timer = setTimeout(() => {
    uni.hideLoading()
    uni.showToast({title: '请求超时', icon: 'none'})
}, 10000)

uni.showLoading({title: '加载中'})
uni.request({
    url: 'https://example.com/api',
    complete: () => {
        clearTimeout(timer)
        uni.hideLoading()
    }
})

以上方法可以根据实际需求组合使用，建议在项目中统一处理超时逻辑，避免重复代码。对于重要请求可以适当延长超时时间，对于非关键请求可以设置较短超时并配合重试机制。