使用async进行进度条的制作

1、首先先准备一个微型的后台，这里我们使用nodejs搭建一个api：

const express = require("express")
const app = express()
const cors = require("cors")
app.use(cors())
app.get("/user",(req,res)=>{
    setTimeout(()=>{
        res.send([
            {
                id:1,
                name:"张三"
            },
            {
                id:2,
                name:"李四"
            },
            {
                id:3,
                name:"王二麻"
            }
        ])    
    },2000)
})
app.listen(80,()=>{
    console.log("serve run in http://127.0.0.1");
})

搭建好后台后，前端就可以使用异步进行对我们api的访问

2、首先前端使用promise封装一个ajax向后台请求数据（这里我们使用原生ajax发起数据请求）：

function Ajax(url){
    return new Promise ((resolve,reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET",url,true);
        xhr.send()
        xhr.onreadystatechange = function(){
            if(this.status === 200){
                resolve(this.responseText)
            }else{
                reject("请求失败")
            }
        }
        xhr.onerror = function(){
            reject(this)
        }
    })
}

然后就是我们的进度条操作以及页面的实现：

<style>
	/* 进度条的样式 */
    #loading {
        width: 0;
        height: 100px;
        background: blue;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<!-- 准备一个进度条盒子 -->
<div id="loading"></div>

// 先引入我们封装好的ajax封装的代码
<script src="./promise.js"></script>
<script>
//封装一个调用ajax的函数，进行发送请求
function query(name) {
    return Ajax(`http://127.0.0.1/user?name=${name}`)
}
//使用async封装我们的进度条加载
async function loading(users) {
   // 获取进度条
   let loading = document.querySelector("#loading");
   for (let i = 0; i < users.length; i++){
   	   // 使用await依次进行向后台发送数据
       let user = await query(users[i])
       // 每次循环，进度条的长度会随请求个数 i + 1 而改变  
       let progress = ((i+1) / users.length) * 100
       // 然后改变我们进度条的宽度
       loading.style.width =  Math.round(progress) + "%"
       // 改变里面的文字
       loading.innerHTML = Math.round(progress) + "%" 
   }
}
// 调用我们封装好了的向后台请求数据的方法
loading(["张三", "李四", "王二麻"])
</script>