1.xhr（即可监听上传进度，也可以监听下载进度）

const request = (options = {}) => {
    const { url, method, data } = options;
    return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', () => {
            if (xhr.readyState === xhr.DONE) {
                resolve(xhr.responseText);
            }
        })
        // 提交数据的进度
        xhr.upload.addEventListener('progress', (e) => {
            // 当前上传的字节长度，总的字节长度
            console.log(e.loaded, e.total);
        })
        // 接受数据的进度
        xhr.addEventListener('progress', (e) => {
            // 当前接受的字节长度，总的字节长度
            console.log(e.loaded, e.total);
        })
        xhr.open(method, url);
        xhr.send(data);
    })
}

2.fetch（只能监听数据的下载进度）

const request = (options = {}) => {
    const { url, method, data } = options;
    return new Promise(async (resolve) => {
        const resp = await fetch(url, {
            body: data
        })
        const total = resp.headers.get('content-length');
        const decoder = new TextDecoder();
        let body = '';
        const reader = resp.body?.getReader();
        let loaded = 0;
        while (1) {
            const { done, value } = await reader?.read();
            if (done) {
                break;
            }
            loaded += value.length;
            body += decoder.decode(value);
            // 数据的总长度，当前接受的长度
            console.log(total, loaded)
        }
        resolve(body)
    })
}