在前端开发中，实现文件下载功能是非常常见的需求。在传统的方式中，我们通常是通过创建 a 标签的方式来实现文件下载，但是如果需要在下载完成后执行一些额外的操作，比如根据下载情况做出一些提示，就会显得有些麻烦。而通过使用 ES7 的 async/await 特性，我们可以更加优雅地实现文件下载的功能。
async/await 概述
在 ES7 中，async/await 是一种新的异步编程方式。可使用 async 关键字来定义一个异步函数，通过 await 关键字可以等待一个异步操作的结果，让异步代码看起来更加同步。
例如：
async function fetchData () {
const res = await fetch('/api/data')
const data = await res.json()
return data
}async/await 在 DOM 操作、请求后端数据等异步场景下非常适用。
实现下载
我们知道，前端实现文件下载的方式通常是通过在浏览器中打开一个提供文件下载的 URL，浏览器会自动下载该文件到本地。
我们可以通过 JavaScript 动态创建一个 a 标签，并将它的 href 属性设为要下载的文件的 URL，然后触发点击事件，即可实现对文件的下载。
function downloadFile (url) {
const a = document.createElement('a')
a.href = url
a.download = 'filename'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}但这个方式的缺陷在于无法处理下载完成后的操作。
好在我们可以通过 async/await 来处理这个问题。在下载的过程中，我们可以等待一个 Promise，该 Promise 的 resolve 完成时即代表文件下载完成。
-- -------------------- ---- ------- ----- -------- ------------ ----- - ----- - - --------------------------- ------ - --- ---------- - ---------- ---------------------------- --------- ---------------------------- ----- --- --------------- -- ------------------- ----- -
我们这里等待的 Promise 是一个 setTimeout，它创建了一个 100ms 的定时器，在延迟结束后 resolve，即 resolve 完成了一个 100ms 的等待，此时即代表下载完成。
完整示例
-- -------------------- ---- ------- ----- -------- ------------ ----- - ----- - - --------------------------- ------ - --- ---------- - ---------- ---------------------------- --------- ---------------------------- ----- --- --------------- -- ------------------- ----- - ----- -------- -------------- -- - ----- --- - ----------- ----- ----------------- ------------- - ----------------------------------------------------------------- ---------------
在上面的示例中，我们定义了一个函数 downloadFile，用于下载文件，并通过 async/await 等待下载的完成。handleDownload 函数则负责处理下载完成后的操作，这里我们简单地弹出一个提示框。最后，在页面部分，我们将 handleDownload 函数与按钮的点击事件绑定起来。
总结
通过使用 ES7 的 async/await 特性，我们可以更加优雅地实现文件下载的功能，并在下载完成后执行一些额外的操作。虽然有些浏览器可能不支持 async/await，但可以通过 Babel 编译实现兼容。希望这篇文章能对你理解 async/await 和实现文件下载有一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c0d64083d39b488152e157