web Promise 限制异步操作的并发个数并尽可能快的完成全部

404 阅读1分钟

8个图片资源的url,已经存储在数组中,任何时刻同时下载的链接数量不可以超过3个,要求尽可能快速地将所有图片加载完成

图片加载

function loadImg(url) {
    return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = function() {
		console.log(url);
		resolve(img);
            };
            img.onerror = function() {
		reject(new Error('Could not load image at' + url));
            };
            img.src = url;
	});
}

先加载3张图片,有图片加载完成,就马上加载下一张,直到加载8张完为止

function load(arr) {
    let urls = arr
    let load_index = -1 // 加载图片的下标 0,1, 2, 3 ... 7

    function limitLoad(num) {
	if (load_index >= urls.length - 1) return
	for (let i = 0; i < num; i++) { // 可以加载几张图片
            load_index++ // 图片开始加载
            loadImg(urls[load_index]).finally(() => {
		limitLoad(1) // 图片加载成功或失败,都会加载下一张
            })
	}
    }
    limitLoad(3)

}
load(urls)

2个请求返回同一数据,先加载快的, 慢的在追加数据。

waitLoading.all = true
const f_p = xxx().then(({data}) => {
	...
	...
}).finally(() => {
    if (workTodoList.value.length != 0) {
	waitLoading.all = false
    }
})

const o_p = xxx().then(({data}) => {
	...
	...
}).finally(() => {
    if (workTodoList.value.length != 0) {
	waitLoading.all = false
    }
})

Promise.all([f_p, o_p]).finally(() => {
    if (workTodoList.value.length == 0) {
	waitLoading.all = false
    }
})