环亚娱乐ag88登录

前言

最近部门在招前端,作为部门唯一的前端,面试了不少应聘的同学,面试中有一个涉及 Promise 的一个问题是:

网页中预加载20张图片资源,分步加载,一次加载10张,两次完成,怎么控制图片请求的并发,怎样感知当前异步请求是否已完成?

然而能全部答上的很少,能够给出一个回调 + 计数版本的,我都觉得合格了。那么接下来就一起来学习总结一下基于 Promise 来处理异步的三种方法。

本文的例子是一个极度简化的一个漫画阅读器,用4张漫画图的加载来介绍异步处理不同方式的实现和差异,以下是 HTML 代码:







Promise


正在加载…



单一请求

最简单的,就是将异步一个个来处理,转为一个类似同步的方式来处理。 先来简单的实现一个单个 Image 来加载的 thenable 函数和一个处理函数返回结果的函数。

function loadImg (url) {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = function () {
resolve(img)
}
img.onerror = reject
img.src = url
})
}

异步转同步的解决思想是:当第一个 loadImg(urls[1]) 完成后再调用 loadImg(urls[2]),依次往下。如果 loadImg() 是一个同步函数,那么很自然的想到用__循环__。

for (let i = 0; i < urls.length; i++) { loadImg(urls[i]) } 当 loadImg() 为异步时,我们就只能用 Promise chain 来实现,最终形成这种方式的调用: loadImg(urls[0]) .then(addToHtml) .then(()=>loadImg(urls[1]))
.then(addToHtml)
//…
.then(()=>loadImg(urls[3]))
.then(addToHtml)

那我们用一个中间变量来存储当前的 promise ,就像链表的游标一样,改过后的 for 循环代码如下:

let promise = Promise.resolve()
for (let i = 0; i < urls.length; i++) { promise = promise .then(()=>loadImg(urls[i]))
.then(addToHtml)
}

promise 变量就像是一个迭代器,不断指向最新的返回的 Promise,那我们就进一步使用 reduce 来简化代码。

urls.reduce((promise, url) => {
return promise 环亚娱乐ag88登录
.then(()=>loadImg(url)) 环亚娱乐ag88登录
.then(addToHtml)
}, Promise.resolve())

在程序设计中,是可以通过函数的__递归__来实现循环语句的。所以我们将上面的代码改成__递归 环亚娱乐ag88登录__:

function syncLoad (index) {
if (index >= urls.length) return
loadImg(urls[index]).then(img => {
// process img
addToHtml(img)
syncLoad (index + 1)
})
}

// 调用
syncLoad(0)

好了一个简单的异步转同步的实现方式就已经完成,我们来测试一下。 这个实现的简单版本已经实现没问题,但是最上面的正在加载还在,那我们怎么在函数外部知道这个递归的结束,并隐藏掉这个 DOM 呢?Promise.then() 同样返回的是 thenable 函数 我们只需要在 syncLoad 内部传递这条 Promise 链,直到最后的函数返回。

发表评论

电子邮件地址不会被公开。 必填项已用*标注