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