Async/Await与Promise区别

 

自从Node的7.6版本,已经默认支持async/await特性了。如果你还没有使用过他,或者对他的用法不太了解,这篇文章会告诉你为什么这个特性“不容错过”。本文辅以大量实例,相信你能很轻松的看懂,并了解Javascript处理异步的一大杀器。

初识Async/await

对于还不了解Async/await特性的同学,下面一段是一个“速成”培训。
Async/await 是Javascript编写异步程序的新方法。以往的异步方法无外乎回调函数和Promise。但是Async/await建立于Promise之上。对于Javascript处理异步,是个老生常谈却历久弥新的话题:

从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底。它们都有额外的复杂性,都需要理解抽象的底层运行机制。
异步编程的最高境界,就是根本不用关心它是不是异步。

async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案。

Async/await语法

试想一下,我们有一个getJSON方法,该方法发送一个异步请求JSON数据,并返回一个promise对象。这个promise对象的resolve方法传递异步获得的JSON数据。具体例子的使用如下:

1

2

3

4

5

6

7

8

const makeRequest = () =>

    getJSON()

        .then(data => {

            console.log(data)

            return "done"

        })

 

makeRequest()

  在使用async/await时,写法如下:

1

2

3

4

5

6

const makeRequest = async () => {

    console.log(await getJSON())

    return "done"

}

 

makeRequest()

  

对比两种写法,针对第二种,我需要进一步说明:

1)第二种写法(使用async/await),在主体函数之前使用了async关键字。在函数体内,使用了await关键字。当然await关键字只能出现在用async声明的函数体内。该函数会隐式地返回一个Promise对象,函数体内的return值,将会作为这个Promise对象resolve时的参数。
可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

2)示例中,await getJSON() 说明console.log的调用,会等到getJSON()返回的promise对象resolve之后触发。

我们在看一个例子加强一下理解,该例子取自阮一峰大神的《ECMAScript 6 入门》一书:

1

2

3

4

5

6

7

8

9

10

11

12

function timeout(ms) {

    return new Promise((resolve) => {

        setTimeout(resolve, ms);

    });

}

 

async function asyncPrint(value, ms) {

    await timeout(ms);

    console.log(value);

}

 

asyncPrint('hello world', 50);

  上面代码指定50毫秒以后,输出hello world。

Async/await究竟好在哪里?

那么,同样是处理异步操作,Async/await究竟好在哪里呢?
我们总结出以下6点。

简约而干净Concise and clean

我们看一下上面两处代码的代码量,就可以直观地看出使用Async/await对于代码量的节省是很明显的。对比Promise,我们不需要书写.then,不需要新建一个匿名函数处理响应,也不需要再把数据赋值给一个我们其实并不需要的变量。同样,我们避免了耦合的出现。这些看似很小的优势其实是很直观的,在下面的代码示例中,将会更加放大。

错误处理Error handling

Async/await使得处理同步+异步错误成为了现实。我们同样使用try/catch结构,但是在promises的情况下,try/catch难以处理在JSON.parse过程中的问题,原因是这个错误发生在Promise内部。想要处理这种情况下的错误,我们只能再嵌套一层try/catch,就像这样:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

const makeRequest = () => {

    try {

    getJSON()

        .then(result => {

            // this parse may fail

            const data = JSON.parse(result)

            console.log(data)

        })

        // uncomment this block to handle asynchronous errors

        // .catch((err) => {

        //   console.log(err)

        // })

        }

    catch (err) {

        console.log(err)

    }

}

  但是,如果用async/await处理,一切变得简单,解析中的错误也能轻而易举的解决:

1

2

3

4

5

6

7

8

9

10

const makeRequest = async () => {

     try {

         // this parse may fail

         const data = JSON.parse(await getJSON())

         console.log(data)

     }

     catch (err) {

         console.log(err)

     }

  }

  

条件判别Conditionals

想象一下这样的业务需求:我们需要先拉取数据,然后根据得到的数据判断是否输出此数据,或者根据数据内容拉取更多的信息。如下:

 

const makeRequest = () => {
    return getJSON()
        .then(data => {
            if (data.needsAnotherRequest) {
                return makeAnotherRequest(data)
                        .then(moreData => {
                            console.log(moreData)
                            return moreData
                        })
            } 
            else {
                console.log(data)
                return data
            }
        })
}

 

这样的代码会让我们看的头疼。这这么多层(6层)嵌套过程中,非常容易“丢失自我”。
使用async/await,我们就可以轻而易举的写出可读性更高的代码:

 

const makeRequest = async () => {
    const data = await getJSON()
    if (data.needsAnotherRequest) {
        const moreData = await makeAnotherRequest(data);
        console.log(moreData)
        return moreData
    } 
    else {
        console.log(data)
        return data    
    }
}

 

中间值Intermediate values

一个经常出现的场景是,我们先调起promise1,然后根据返回值,调用promise2,之后再根据这两个Promises得值,调取promise3。使用Promise,我们不难实现:

 

const makeRequest = () => {
    return promise1()
        .then(value1 => {
            // do something
            return promise2(value1)
                .then(value2 => {
                    // do something          
                    return promise3(value1, value2)
                })
        })
}

 

如果你难以忍受这样的代码,我们可以优化我们的Promise,方案是使用Promise.all来避免很深的嵌套。
就像这样:

 

 

const makeRequest = () => {
    return promise1()
        .then(value1 => {
            // do something
            return Promise.all([value1, promise2(value1)])
        })
        .then(([value1, value2]) => {
            // do something          
            return promise3(value1, value2)
        })
}

 

Promise.all这个方法牺牲了语义性,但是得到了更好的可读性。
但是其实,把value1 & value2一起放到一个数组中,是很“蛋疼”的,某种意义上也是多余的。

同样的场景,使用async/await会非常简单:

const makeRequest = async () => {
    const value1 = await promise1()
    const value2 = await promise2(value1)
    return promise3(value1, value2)
}

总结

Async/await是近些年来JavaScript最具革命性的新特性之一。他让读者意识到使用Promise存在的一些问题,并提供了自身来代替Promise的方案。
当然,对这个新特性也有一定的担心,体现在:
他使得异步代码变的不再明显,我们好不容易已经学会并习惯了使用回调函数或者.then来处理异步。新的特性当然需要时间成本去学习和体会;
退回来说,熟悉C#语言的程序员一定会懂得这些学习成本是完全值得的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章