如何在现代JavaScript中编写异步任务(2)

当 Promises 最初被宣布为 JavaScript 语言的新成员时,并没有引起太多关注,它们并不是一个新概念,因为其他语言在几十年前就已经实现了类似的实现。事实上自从它出现以来,他们就改变了我从事的大多数项目的语义和结构。

Promises不仅为开发人员引入了用于编写异步代码的内置解决方案,,而且还开辟了Web 开发的新阶段,成为 Web 规范后来的新功能(如 fetch)的构建基础。

从回调方法迁移到基于 promise 的方法在项目(例如库和浏览器)中变得越来越普遍,甚至 Node.js 也开始缓慢地迁移到它上面。

例如,包装 Node 的 readFile 方法:

const { readFile } = require('fs'); const asyncReadFile = (path, options) => { return new Promise((resolve, reject) => { readFile(path, options, (error, data) => { if (error) reject(error); else resolve(data); }) }); }

在这里,我们通过在 Promise 构造函数内部执行来隐藏回调,方法成功后调用 resolve,定义错误对象时调用reject。

当一个方法返回一个  Promise  对象时,我们可以通过将一个函数传递给 then 来遵循其成功的解析,它的参数是 Promise  被解析的值,在这里是 data。

如果在方法运行期间抛出错误,则将调用 catch 函数(如果存在)。

注意:如果你需要更深入地了解 Promise 的工作原理,建议你看 Jake Archibald 在 Google 的 web 开发博客上写的文章“ JavaScript Promises:简介”。

现在我们可以使用这些新方法并避免回调链。

asyncRead('./main.less', 'utf-8') .then(data => console.log('file content', data)) .catch(error => console.error('something went wrong', error))

它具有创建异步任务的原生方法,并以清晰的接口跟踪其可能的结果,这摆脱了观察者模式。基于 Promise 的代码似乎可以解决可读性差且容易出错的代码。

在更好的语法突出显示和更清晰的错误提示信息对编码过程中提供的帮助下,对于开发人员来说,编写更容易理解的代码变得更具可预测性,并且执行的情况更好,更容易发现可能的陷阱。

Promises 的采用在社区中非常普遍,以至于 Node.js 迅速发布其 I/O 方法的内置版本以返回 Promise 对象,例如从 fs.promises 中导入文件操作。

它甚至提供了一个 promisify 工具来包装遵循错误优先回调模式的函数,并将其转换为基于 Promise 的函数。

但是 Promise 在所有情况下都能提供帮助吗?

让我们重新评估一下用 Promise 编写的样式预处理任务。

const { mkdir, writeFile, readFile } = require('fs').promises; const less = require('less') readFile('./main.less', 'utf-8') .then(less.render) .then(result => mkdir('./assets') .then(writeFile('assets/main.css', result.css, 'utf-8')) ) .catch(error => console.error(error))

代码中的冗余明显减少了,尤其是在错误处理方面,因为我们现在依赖于 catch,但是 Promise 在某种程度上没能提供直接与动作串联相关的清晰代码缩进。

实际上,这是在调用 readFile 之后的第一个 then 语句中实现的。这些代码行之后发生的事情是需要创建一个新的作用域,我们可以在该作用域中先创建目录,然后将结果写入文件中。这会导致缩进节奏的中断,乍一看就不容易确定指令序列。

注意:请注意,这是一个示例程序,我们可以控制某些方法,它们都遵循行业惯例,但并非总是如此。通过更复杂的串联或引入不同的库,我们的代码风格可以轻松被打破。

令人高兴的是,JavaScript 社区再次从其他语言的语法中学到了东西,并增加了一种表示方法,可以在大多数情况下帮助异步任务串联,而不是像同步代码那样能够令人轻松的阅读。

Async 与 Await

Promise 被定义为执行时的未解决的值,创建 Promise 实例是对此工件的“显式”调用。

const { mkdir, writeFile, readFile } = require('fs').promises; const less = require('less') readFile('./main.less', 'utf-8') .then(less.render) .then(result => mkdir('./assets') .then(writeFile('assets/main.css', result.css, 'utf-8')) ) .catch(error => console.error(error))

在异步方法内部,我们可以用 await 保留字来确定 Promise 的解决方案,然后再继续执行。

让我们用这种语法重新编写代码段。

const { mkdir, writeFile, readFile } = require('fs').promises; const less = require('less') async function processLess() { const content = await readFile('./main.less', 'utf-8') const result = await less.render(content) await mkdir('./assets') await writeFile('assets/main.css', result.css, 'utf-8') } 11processLess()

注意:请注意,我们需要将所有代码移至某个方法中,因为我们无法在 异步函数的作用域之外使用 await 。

每当异步方法找到一个 await 语句时,它将停止执行,直到 promise 被解决为止。

尽管是异步执行,但用 async/await 表示会使代码看起来好像是同步的,这是容易被开发人员阅读和理解的东西。

那么错误处理呢?我们可以用在语言中存在了很久的try 和 catch。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsgyyg.html