React Native为http网络请求添加timeout超时异常处理: 用XMLHttpRequest替换fetch发送的区别

在 React Native 中，使用 fetch API 进行网络请求时，异常处理是非常重要的. React native 的 fetch 却不提供超时异常。

在 React Native 中，fetch API 本身并不直接支持超时（timeout）功能。通常通过包装 fetch 调用并在一个 setTimeout 函数中取消请求来实现超时功能。较为复杂。

React Native 中已经内置了XMLHttpRequest API(也就是俗称的 ajax)。这种老式的ajax请求在react native中是可以跨域的。这里设置timeout即可。

但  XMLHttpRequest  没有 async/ await 语法，使用 Promise 简单封装一下即可。

export const DefaultOptions = { 
    type: 'application/json',
    timeout: 180000,
}

export const get = (url: string, options: Partial<typeof DefaultOptions> = {}) => new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.onreadystatechange = e => {
        if (request.readyState !== 4) {
            console.log(url, request.readyState)
            return;
        }

        if (request.status === 200) {
            const { responseText } = request
            try {
                const json = JSON.parse(responseText)
                resolve(json)
            } catch(e) {
                resolve(responseText)
            }
        } else {
            reject(new Error('Status code:' + request.status))
        }
    };

    request.open('GET', url);
    request.setRequestHeader('Content-Type', options.type || DefaultOptions.type);
    request.timeout = options.timeout || DefaultOptions.timeout;
    request.withCredentials = true;
    request.send();
})

使用：