专栏名称: Fundebug
Fundebug为JavaScript、微信小程序及Node.js开发团队提供专业的线上代码bug监控和智能分析服务。
目录
相关文章推荐
前端早读课  ·  【早阅】始终将你的估算值乘以π ·  7 小时前  
前端大全  ·  从 DeepSeek 看25年前端的一个小趋势 ·  昨天  
前端早读课  ·  【第3455期】快手主站前端工程化探索:Gu ... ·  昨天  
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了 ·  2 天前  
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了 ·  2 天前  
51好读  ›  专栏  ›  Fundebug

重构:从Promise到Async\/Await

Fundebug  · 公众号  · 前端  · 2017-12-13 09:04

正文

摘要: 夸张点说,技术的发展与历史一样,顺之者昌,逆之者亡。JS开发者们,赶紧拥抱Async/Await吧!

  • GitHub仓库: Fundebug/promise-asyncawait

早在半年多之前,我就在鼓吹Async/Await替代Promise的6个理由,似乎还招致了一些批评。然而,直到最近,我才真正开始进行代码重构,抛弃Promise,全面使用Async/Await。因为,Node 8终于LTS了!

Async/Await真的比Promise好吗?

是的。

这些天,我大概重构了1000行代码,最大的感觉是代码简洁了很多:

  • 真正地用同步的方式写异步代码

  • 不用写then及其回调函数,减少代码行数,也避免了代码嵌套

  • 所有异步调用可以写在同一个代码块中,无需定义多余的中间变量

  • async函数会隐式地返回一个Promise,因此可以直接return变量,无需使用Promise.resolve进行转换

下面,我们可以通过一个非常简单的示例来体验一下Async/Await的酸爽:

示例1

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)

// 使用Promise
function usePromise()
{
   let a
   readFile("a.txt", "utf8")
       .then(tmp =>
       {
           a = tmp
           return readFile("b.txt", "utf8")
       })
       .then(b =>
       {
           let result = a + b
           console.log(result) // 输出"Hello, Fundebug!"
       })

}

// 使用Async/Await
async function useAsyncAwait()
{
   let a = await readFile("a.txt", "utf8")
   let b = await readFile("b.txt", "utf8")
   let result = a + b
   console.log(result) // 输出"Hello, Fundebug!"
}

usePromise()
useAsyncAwait()

由示例可知,使用Async/Await极大地简化了代码,使得代码可读性提高了非常多。

Async/Await真的替代了Promise?

是的。

对于Async/Await替代Promise的6个理由,批评者执着于Async/Await是基于Promise实现的,因此 替代 这个词不准确,这就有点尴尬了。

一方面,这里的替代的是异步代码的编写方式,并非完全抛弃大家心爱的 Promise ;另一方面, Promise 还是基于 回调函数 实现的,那 Promise 也没有替代 回调函数

重构代码之后,我仍然用到了Promise库bluebird。”Talk is cheap, Show me the code!”,大家不妨看看两个示例。

示例2:Promise.promisify

使用Promise.promisify将不支持 Promise 的方法Promise化,调用异步接口的时候有两种方式:

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)

// 使用Promise
function usePromise()
{
   readFile("b.txt", "utf8")
       .then(b =>
       {
           console.log(b)
       })
}

// 使用Async/Await
async function useAsyncAwait()
{
   var b = await readFile("b.txt", "utf8")
   console.log(b) // 输出"Fundebug!"
}

usePromise()
useAsyncAwait()

Fundebug是全栈JavaScript错误监控平台,支持各种前端和后端框架,可以帮助您第一时间发现BUG!

示例3:Promise.map

使用Promise.map读取多个文件的数据,调用异步接口的时候有两种方式:

const Promise = require("bluebird")
var readFile = Promise.promisify(require("fs").readFile)
var files = ["a.txt", "b.txt"]

// 使用Promise
function






请到「今天看啥」查看全文