JS 41 - 显示非同步请求的上传进度条

大家好！

今天要实作非同步请求的上传进度条。
我们进入今天的主题吧！

程序码

const xhr = new XMLHttpRequest();
Felix(xhr.upload).on('progress', function (e) {
    if (!e.lengthComputable) return;
    const progress = e.loaded / e.total * 100 + '%';
    Felix('#progress > div').width = progress;
});
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.send(JSON.stringify({ name: 'Felix', date: '2021-10-26' }));

实测

<div id="progress">
    <div></div>
</div>

范例连结制作中。

差不多也到尾声了。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们明天再见！