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
            })
        }
    })

}