蓝狮官网为什么 async/await 不仅仅是语法糖

开篇观点,async/await 不仅仅是 Promise 上面的语法糖,因为 async/await 确实提供了切实的好处。

async/await 让异步代码变成同步的方式,从而使代码更具表现力和可读性。
async/await 统一了异步编程的经验;以及提供了更好的错误堆栈跟踪。
关于 JS 中异步编程的一点历史
异步编程在 JavaScript 中很常见。每当我们需要进行网络服务调用、文件访问或数据库操作时,尽管语言是单线程的,但异步性是我们防止用户界面被阻塞的方法。

在 ES6 之前,回调是猿们处理异步编程的方式。蓝狮注册登陆我们表达时间依赖性(即异步操作的执行顺序)的唯一方法是将一个回调嵌套在另一个回调中,这导致了所谓的回调地狱。

Es6 中引入了 Promise,它是一个用于异步操作的一流对象,我们可以轻松地传递、组合、聚合和应用转换。时间上的依赖性通过 then方法链干净地表达出来。

有了 Promise 这个强大的伙伴,听起来异步编程在 JS 中是一个已经解决的问题,对吗?

恩,还没有,因为有时候 Promise 的级别太低了,不太适合使用。

有时 Promise 的级别太低,不适合使用
尽管出现了 Promise,但在 JS 中仍然需要一个更高级别的语言结构来进行异步编程。

我们来看个例子, 假设我们需要某个函数在某个时间间隔轮询一个api。当达到最大重试次数时,它就会解析为 null。

下面是 Promise 的一种解决方案:

let count = 0;

function apiCall() {
return new Promise((resolve) =>
// a在第6次重试时,它被解析为 “value”。
count++ === 5 ? resolve(‘value’) : resolve(null)
);
}

function sleep(interval) {
return new Promise((resolve) => setTimeout(resolve, interval));
}

function poll(retry, interval) {
return new Promise((resolve) => {
// 为了简洁起见,跳过错误处理

if (retry === 0) resolve(null);
apiCall().then((val) => {
  if (val !== null) resolve(val);
  else {
    sleep(interval).then(() => {
      resolve(poll(retry - 1, interval));
    });
  }
});

});
}

poll(6, 1000).then(console.log); // ‘value’
这种解决方案的直观性和可读性取决于人们对Promise的熟悉程度,以及 Promise.resolve 如何 “平铺” Promise 和递归。对我来说,这不是写这样一个函数的最可读的方式。

使用 async/await
我们用 async/await 语法重写上述解决方案:

async function poll(retry, interval) {
while (retry >= 0) {
const value = await apiCall().catch((e) => {});
if (value !== null) return value;
await sleep(interval);
retry–;
}

return null;
}
我想大多数人都会觉得上面的解决方案更有可读性,因为我们能够使用所有正常的语言结构,如循环、异步操作的 try-catch 等。

这可能是 async/await 的最大卖点–使我们能够以同步的方式编写异步代码。另一方面,这可能是对 async/await 最常见的反对意见的来源,稍后再谈这个问题。

顺便说一下,await甚至有正确的操作符优先级,所以await a + await b 等于(await a) + (await b),而不是让我们说await (a + await b)。

async/await 在同步和异步代码中提供了统一的体验
async/await的另一个好处是,await自动将任何非Promise(non-thenables)包装成 Promises 。await的语义等同于Promise.resolve,这意味着可以 await 任何东西:

function fetchValue() {
return 1;
}

async function fn() {
const val = await fetchValue();
console.log(val); // 1
}

// 上面等同于下面

function fn() {
Promise.resolve(fetchValue()).then((val) => {
console.log(val); // 1
});
}
如果我们将 then 方法附加到从 fetchValue 返回的数字 1 上,就会出现以下错误。

function fetchValue() {
return 1;
}

function fn() {
fetchValue().then((val) => {
console.log(val);
});
}

fn(); // Uncaught TypeError: fetchValue(…).then is not a function
最后, 从 async 函数返回的任何东西都是一个 Promise:

Object.prototype.toString.call((async function () {})()); // ‘[object Promise]’
async/await 提供更好的错误堆栈跟踪
V8工程师Mathias写了一篇名为Asynchronous stack traces: why await beats Promise#then() 的文章,介绍了为什么与 Promise相比,引擎更容易捕捉和存储 async/await 的堆栈跟踪。事例如下:

async function foo() {
await bar();
return ‘value’;
}

function bar() {
throw new Error(‘BEEP BEEP’);
}

foo().catch((error) => console.log(error.stack));

// Error: BEEP BEEP
// at bar (:7:9)
// at foo (:2:9)
// at :10:1
async 版本正确地捕获了错误堆栈跟踪。

我们再来看看 Promise 版本。

function foo() {
return bar().then(() => ‘value’);
}

function bar() {
return Promise.resolve().then(() => {
throw new Error(‘BEEP BEEP’);
});
}

foo().catch((error) => console.log(error.stack));

// Error: BEEP BEEP at :7:11
堆栈跟踪丢失。从匿名的箭头函数切换到命名的函数声明有一点帮助,但帮助不大:

function foo() {
return bar().then(() => ‘value’);
}

function bar() {
return Promise.resolve().then(function thisWillThrow() {
throw new Error(‘BEEP BEEP’);
});
}

foo().catch((error) => console.log(error.stack));

// Error: BEEP BEEP
// at thisWillThrow (:7:11)
对 async/await 常见反对意见
对 async/await 主要有两种常见的反对意见。

首先,当独立的异步函数调用可以用Promise.all并发处理时,蓝狮官网如果我们还大量使用async/await 可能会导致滥用,这样会造成开发者不去试图了解 Promise 的幕后是如何工作,而只是一味的使用 async/await。

第二种情况更为微妙。一些函数式编程爱好者认为 async/await 会招致命令式编程。从 FP 程序员的角度来看,能够使用循环和 try catch 并不是一件好事,因为这些语言结构意味着副作用,并鼓励使用不那么理想的错误处理。

我对这种说法待保留意见。FP程序员理所当然地关心他们程序中的确定性。他们希望对自己的代码有绝对的信心。为了达到这个目的,需要一个复杂的类型系统,其中包括Result等类型。但我不认为async/await本身与FP不相容。

无论如何,对于大多数人来说,包括我在内,FP仍然是一种后天的味道(尽管我确实认为FP超级酷,而且我正在慢慢学习它)。async/await提供的正常控制流语句和try catch错误处理,对于我们在 JavaScript 中协调复杂的异步操作是非常宝贵的。这正是为什么说 “async/await只是一种语法糖” 是一种轻描淡写的说法。

0 Comments
Leave a Reply