10分钟了解JavaScript Async/Await

Javanx

发布于 2019-09-04 10:34:50

3.3K0

发布于 2019-09-04 10:34:50

文章被收录于专栏：web秀

前言

在过去很长的一段时间里，JavaScript开发人员不得不依赖回调来处理异步代码。如果遇到赋值的逻辑，会发现，特别难处理维护，代码看起来也特别的糟糕。

现在，由于 Async / Await 的出现，编写JavaScript代码再也不用像以前一样了。

什么是 Async/Await?

Async / Await是一个备受期待的JavaScript功能，它使异步函数的使用更加愉快和易于理解。它构建在Promises之上，并与所有现有的基于Promise的API兼容。

该名称来自async和await - 这两个关键字将帮助我们清理异步代码：

Async - 声明一个异步函数 (async function someName(){...})。 1、自动将常规函数转换为承诺。 2、当调用异步函数时，请使用其主体中返回的内容进行解析。 3、异步函数允许使用await。

Await - 暂停异步函数的执行。（var result = await someAsyncCall();）。 1、当置于Promise调用前面时，wait强制其余代码等待，直到该Promise完成并返回结果。 2、Await仅适用于Promises，它不适用于回调。 3、await只能在异步函数内部使用。

下面是一个简单的例子：

假设我们想从服务器上获取一些JSON文件。我们将编写一个使用AXIOS库的函数，并将HTTP GET请求发送到 xxx.json。我们必须等待服务器响应，所以这个HTTP请求自然是异步的。

下面我们可以看到相同的函数实现了两次。首先是Promise，然后是第二次使用异步/等待。

// Promise
function getJSON(){
    // 为了使函数阻塞，我们手动创建一个Promise。
    return new Promise( function(resolve) {
        axios.get('http://www.javanx.cn/example.json')
            .then( function(json) {
                // 我们使用resolve返回结果
                resolve(json);
            });
    });

}

// Async/Await
// async关键字将自动创建一个新的Promise并返回它
async function getJSONAsync(){

    // wait关键字使我们不必编写.then（）块
    let json = await axios.get('https://tutorialzine.com/misc/files/example.json');

    // GET请求的结果在JSON变量中可用
    // 我们返回它，就像正常同步函数一样
    return json;
}

很明显，代码的Async / Await版本更短，更容易阅读。除了使用的语法之外，两个函数完全相同 - 它们都返回Promises并使用axios的JSON响应来解析。我们可以这样调用我们的异步函数：

getJSONAsync().then( function(result) {
    // Do something with result.
});

那么，Async / Await 会比 Promise更好嘛？

一点都不。使用Async / Await时，我们仍在使用Promise。从长远来看，对Promise的良好理解实际上对您有很大的好处。

甚至有一些用例Async / Await并不能解决问题，我们不得不回到Promise上，需求答案。

一个这样的场景，当我们需要进行多个独立的异步调用并等待所有这些调用完成时。

如果我们尝试使用async和await执行此操作，将发生以下情况：

async function getABC() {
  let A = await getValueA(); // 2 second to finish
  let B = await getValueB(); // 4 second to finish
  let C = await getValueC(); // 3 second to finish

  return A*B*C;
}

每个调用将等待前一个返回结果。由于我们一次只进行一次调用，整个功能从开始到结束需要9秒（2 + 4 + 3）。

这不是最佳解决方案，因为三个变量A，B和C不相互依赖。换句话说，在我们得到B之前，我们不需要知道A的值。我们可以同时得到它们并且等待几秒钟。

要同时发送所有请求，需要Promise.all（）。这将确保执行后面函数之前我们仍然拥有所有结果，但异步调用将并行触发，而不是一个接一个地触发。

async function getABC() {
  // Promise.all（）允许我们同时发送所有请求。
  let results = await Promise.all([ getValueA, getValueB, getValueC ]); 
  return results.reduce((total,value) => total * value);
}

这样，该功能将花费更少的时间。 getValueB和getValueC调用将在getValueB结束时完成。我们将有效地将执行时间减少到最慢请求的时间（getValueB - 4秒），而不是时间的总和。

处理Async / Await中的错误

Async / Await的另一个好处是它允许我们在try / catch块中捕获任何意外错误。我们只需要像这样包装我们的Await：

async function doSomethingAsync(){
    try {
        // 此异步调用可能会失败.
        let result = await someAsyncCall();
    }
    catch(error) {
        // 我们将在这里发现错误
    }
}

catch子句将处理等待的异步调用，或我们在try块中编写的任何其他失败代码所引发的错误。

如果情况需要，我们还可以在执行异步函数时捕获错误。因为所有异步函数都返回Promise，所以在调用它们时我们可以简单地包含一个.catch（）事件处理程序。

// 没有try / catch块的异步函数。
async function doSomethingAsync(){
    // This async call may fail.
    let result = await someAsyncCall();
    return result;  
}

// 我们在调用函数时捕获错误
doSomethingAsync().
    .then(successHandler)
    .catch(errorHandler);

根据自己的喜好，选择之中即可。同时使用try/catch和.catch（）很可能会导致问题。