1.xhr（即可監(jiān)聽上傳進度业稼，也可以監(jiān)聽下載進度）
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);
}
})
// 提交數(shù)據(jù)的進度
xhr.upload.addEventListener('progress', (e) => {
// 當(dāng)前上傳的字節(jié)長度伏钠，總的字節(jié)長度
console.log(e.loaded, e.total);
})
// 接受數(shù)據(jù)的進度
xhr.addEventListener('progress', (e) => {
// 當(dāng)前接受的字節(jié)長度横漏，總的字節(jié)長度
console.log(e.loaded, e.total);
})
xhr.open(method, url);
xhr.send(data);
})
}
2.fetch（只能監(jiān)聽數(shù)據(jù)的下載進度）
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);
// 數(shù)據(jù)的總長度，當(dāng)前接受的長度
console.log(total, loaded)
}
resolve(body)
})
}
