xhr fetch 监控响应进度

xhr axios
fetch umi-request

功能点	XHR	fetch
基本的请求能力	✔	✔
基本的获取响应能力	✔	✔
监控请求进度	✔	x
监控响应进度	✔	✔
servie worker 中是否能用	x	✔
控制cookie的携带	x	✔
控制重定向	x	✔
请求取消	✔	✔
自定义referrer	x	✔
流	x	✔
api风格	event	promise
活跃度	停止更新	不断更新

export function request(options={}){
    const {url,method='GET',onProgress,data=null}=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); //目前过来 总的
            onProgress&&onProgress({
                loaded:e.loaded,
                total:e.total
            })
        })
        xhr.open(method,url)
        xhr.send(data)

    })

}


// 监控响应进度
export function request(options){
    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-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)
            onProgress&&onProgress({
                loaded,total
            })
        }
    })

}