JavaScript异步函数

JavaScript的主要优势之一就是任何事情都是异步的。在大多数情况下,不同部分的代码不会影响共他的代码执行。

doALongThing(() => console.log('I will be logged second!'));
console.log('I will be logged first!');

不幸的是,这也是JavaScript的一个主要缺点。因为默认情况下一切都是异步的,当你想同步执行代码是它会让我们更加困难。

第一个要解决的问题就是回调。如果你的代码的一部分是依赖于其他的结果,我们将不得不嵌套代码:

doSomething((response) => { 
 doSomethingElse(response,(secondResponse) => {
 doAThirdThing(secondResponse);
 });
})

在回调中嵌套回调,我们都知道这样不利于维护。所以Promise是一个很好的解决方案。可以更简洁,更扁平的方式处理同步代码。

doSomething() 
 .then((response) => doSomethingElse(response))
 .then((secondResponse) => doAThirdThing(secondResponse));
// Even cleaner
doSomething().then(doSomethingElse).then(doAThirdThing);

正如你所看到的,Promise也并不完美。ES2017规范提供另一种方法来处理同步代码,那就是异步函数。这些能让我们编写异步代码就像是写同步代码。

创建一个异步函数

使用async函数表达式来定义一个异步函数。下面显示的就是一个基本功能:

async function foo() { 
 const value = await somePromise();
 return value;
}

在定义的函数前使用async,那这个函数作为一个异步函数。这个关键词可以用于任何函数声明的语法中:

// Basic function
async function foo() { … }
// Arrow function
const foo = async () => { … }
// Class methods
class Bar { 
 async foo() { … }
}

一旦定义了一个函数作为一个异步函数,我们就可以使用await关键词。这个关键词放在回调的Promise之前,将会暂停执行函数,直到Promise执行或拒绝。

处理错误

异步函数中的错误处理可以使用trycatch块。第一个块是try,让我们尝试一个动作。第二个块catch,叫做如果行动失败了。它接受一个paramter,包含抛出的任何错误。

async function foo() { 
 try {
 const value = await somePromise();
 return value;
 }
 catch (err) {
 console.log("Oops, there was an error :(");
 }
}

使用一个异步函数

异步函数并不能真正的替代Promise。但两个可以一起携手合作。一个异步函数将await执行一个Promise和一个异步函数始终返回一个Promise。

异步函数返回的Promise将解决任何函数返回的值。

async function foo() { 
 await somePromise();
 return ‘success!’
}
foo().then((res) => console.log(res)) // ‘success!’

如果抛出一个错误,Promise将拒绝那个错误。

async function foo() { 
 await somePromise();
 throw Error(‘oops!’)
}
foo() 
.then((res) => console.log(res))
.catch((err) => console.log(err)) // ‘oops!’

并行执行异步功能

使用Promise时,可以使用Promise.all()方法可以并行执行多个Promise。

function pause500ms() { 
 return new Promise((res) => setTimeout(res, 500));
}
const promise1 = pause500ms(); 
const promise2 = pause500ms();
Promise.all([promise1, promise2]).then(() => { 
console.log("I will be logged after 500ms");
});

使用异步函数,我们必须解决位置问题达到一样的效果。如果我们只是在一个序列的await函数中执行,他们将按顺序执行,因为await将会暂停执行其他函数。

async function inSequence() { 
 await pause500ms();
 await pause500ms(); 
 console.log("I will be logged after 1000ms");
}

这将需要1000ms才能执行完,因为第二个await要等到第一个已经完成才会开始。为了解决这个问题,我们需要参考下面这个函数:

async function inParallel() { 
 const await1 = pause500ms();
 const await2 = pause500ms();
 await await1;
 await await2;
 console.log("I will be logged after 500ms");
}

这仅仅需要500ms就完成了,因为两个pause500ms()函数被同时执行。

Promise或异步函数

正如前面提到的,两个一起使用时,异步函数代替不了Promise。异步函数提供了一种替代方法,和在某些情况下更好的工作方式是基于Promise函数。但是,他仍然使用Promise。

因为返回一个Promise,所以一个异步函数可以由另一个异步函数或Promise调用。我们可以混合使用和根据匹配的语法选择适合的方法。

function baz() {
 return new Promise((res) => setTimeout(res, 1000));
}
async function foo() {
 await baz();
 return 'foo complete!';
}
async function bar() {
 const value = await foo();
 console.log(value);
 return 'bar complete!';
}
bar().then((value) => console.log(value));

接下来将会发生:

  • 等待1000ms
  • 打印出“foo complete!”
  • 打印出“bar complete!”

Support

在写这篇文章时,异步函数和Promise都可以用在所有主流浏览器(除了IE和Opera Mini)。

原文链接:https://bitsofco.de/asynchronous-functions-101/

发表评论

登录后才能评论