JavaScript异步函数

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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)。

本文根据@Ire Aderinokun的《Asynchronous Functions 101》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://bitsofco.de/asynchronous-functions-101/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/asynchronous-functions-101.htmlAir Jordan VII 7 Retro Championship

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/asynchronous-functions-101.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部