传输进度

基本封装

export function request(options = {}){
    const { url, method = 'GET' , data = null } = options;
    return new Promise((resolve)) => {
        const xjr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', () => {
            if(xhr.readyState === xhr.DONE){
                resolve(xhr.responseText);
            }
        });
        xhr.open(method, url);
        xhr.send(data);
    }
}

加入onProgress，使得用户端知道服务器加载情况，xhr提供的事件progress，事件的参数e拿到loaded属性表示加载的字节数,下面使用_xhr封装_

export function request(options = {}){
    const { url, method = 'GET' , data = null } = options;
    return new Promise((resolve)) => {
        const xjr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', () => {
            if(xhr.readyState === xhr.DONE){
                resolve(xhr.responseText);
            }
        });
        xhr.addEventListener('progress',(e)=>{
            onProgress &&
                onProgress({
                    loaded: e.loaded,
                    total: e.total,
                }; /*console.log(e.loaded,e.total)*/
        })
        xhr.open(method, url);
        xhr.send(data);
    }
}

由于xhr官方停止维护，下面更推荐使用fetch实现封装,

export function request(option ={}) {
    const { url, method = ' GET',onProgress , data = null } = options;
    return new Promise(async (resolve) => {
        const resp = await fetch(url , {
            method,
            body: data,
        });
    const total = +resp.headers.get('content'); /*拿到服务器响应头中的content-length */
    const decoder = new TextDecoder(); //文本解码器
    let body = '';
    const reader = resp.body.getReader();  /*const body = await resp.text();*/
    let loaded = 0;
    while(1){
        const {done, value} = await reader.read();
        if(done){
            break;
        }
        loaded += value.length;
        body += decoder.decode(value);
        onProgress &&
            onProgress({
                loaded: e.loaded,
                total: e.total,
            };
    }
    resolve(body); //循环结束后拿到完整的响应文本
    });
}

上传

和传输基本一样
xhr，提供一个事件，upload里面的progress

 xhr.addEventListener('progress',(e)=>{
        onProgress &&
            onProgress({
                loaded: e.loaded,
                total: e.total,
            }; 
    })
 xhr.upload.addEvenetlisener('progress',e=>{   

 })

注意fetch难以实现，因为Request.body属性是ReadableSteam