async/await 更好的异步解决方案

Ali_ 发布于2019-08-22 11:16 / 3294人阅读

摘要：大家都一直在尝试使用更好的方案来解决这些问题。这是一个用同步的思维来解决异步问题的方案。当我们发出了请求，并不会等待响应结果，而是会继续执行后面的代码，响应结果的处理在之后的事件循环中解决。我们可以用一个两人问答的场景来比喻异步与同步。

在实际开发中总会遇到许多异步的问题，最常见的场景便是接口请求之后一定要等一段时间才能得到结果，如果遇到多个接口前后依赖，那么问题就变得复杂。大家都一直在尝试使用更好的方案来解决这些问题。最开始只能利用回调函数，后来开始有人使用Promise的思维来搞定。到ES6中开始支持原生的Promise，引入Generator函数。

直到ES7，有了async/await。

这是一个用同步的思维来解决异步问题的方案。

我想很多人可能还不太分得清同步与异步的区别。如果你已经彻底了解了事件循环，那么想必对异步的概念应该非常了解。当我们发出了请求，并不会等待响应结果，而是会继续执行后面的代码，响应结果的处理在之后的事件循环中解决。那么同步的意思，就是等结果出来之后，代码才会继续往下执行。

我们可以用一个两人问答的场景来比喻异步与同步。A向B问了一个问题之后，不等待B的回答，接着问下一个问题，这是异步。A向B问了一个问题之后，然后就笑呵呵的等着B回答，B回答了之后他才会接着问下一个问题，这是同步。

那么我们先记住这个特点，async/await使用同步的思维，来解决异步的问题。

在继续分析它的语法与使用之前，我们先介绍一下如何在我们的开发环境中支持该语法。

如果你已经知道如何配置，可跳过

一、如何在自己的开发环境中支持async/await语法

这里主要介绍两种方式。

1. webpack中支持该语法

首先在当前项目中使用npm下载babel-loader。

> npm install babel-loader --save-dev

然后在配置文件webpack.confing.dev.js中配置，在module.exports.module.rules中添加如下配置元素即可。

  {
    test: /.(js|jsx)$/,
    include: paths.appSrc,
    loader: require.resolve("babel-loader"),
    options: {
      cacheDirectory: true,
    },
  },

如果你使用最新版本的create-react-app或者vue-cli来构建你的代码，那么它们应该已经支持了该配置。

2. gulp中支持该语法

首先安装gulp插件

> npm install gulp-babel --save-dev

然后编写任务

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("babel", function() {
  return gulp.src("src/app.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
});

二、如何使用

async函数是Generator的一个语法糖。如果你不知道Generator是什么函数也没有关系，我们只需要知道async函数实际上返回的是一个Promise对象即可。

async function fn() {
    return 30;
}

// 或者
const fn = async () => {
    return 30;
}

在声明函数时，前面加上关键字async，这就是async的用法。当我们用console.log打印出上面声明的函数fn，我们可以看到如下结果：

console.log(fn());

// result
Promise = {
    __proto__: Promise,
    [[PromiseStatus]]: "resolved",
    [[PromiseValue]]: 30
}

很显然，fn的运行结果其实就是一个Promise对象。因此我们也可以使用then来处理后续逻辑。

fn().then(res => {
    console.log(res);  // 30
})

await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果。

但是我们需要注意的是，await关键字只能在async函数中使用。并且await后面的函数运行后必须返回一个Promise对象才能实现同步的效果。

当我们使用一个变量去接收await的返回值时，该返回值为Promise中resolve出来的值（也就是PromiseValue）。

// 定义一个返回Promise对象的函数
function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(30);
        }, 1000);
    })
}

// 然后利用async/await来完成代码
const foo = async () => {
    const t = await fn();
    console.log(t);
    console.log("next code");
}

foo();

// result:
// 30
// next code

运行这个例子我们可以看出，当在async函数中，运行遇到await时，就会等待await后面的函数运行完毕，而不会直接执行next code。

如果我们直接使用then方法的话，想要达到同样的结果，就不得不把后续的逻辑写在then方法中。

const foo = () => {
    return fn().then(t => {
        console.log(t);
        console.log("next code");    
    })
}

foo();

很显然如果使用async/await的话，代码结构会更加简洁，逻辑也更加清晰。

异常处理

在Promise中，我们知道是通过catch的方式来捕获异常。而当我们使用async时，则通过try/catch来捕获异常。

function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("some error.");
        }, 1000);
    })
}

const foo = async () => {
    try {
        await fn();
    } catch (e) {
        console.log(e);  // some error
    }
}

foo();

如果有多个await函数，那么只会返回第一个捕获到的异常。

function fn1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("some error fn1.");
        }, 1000);
    })
}
function fn2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("some error fn2.");
        }, 1000);
    })
}

const foo = async () => {
    try {
        await fn1();
        await fn2();
    } catch (e) {
        console.log(e);  // some error fn1.
    }
}

foo();

实践

在实践中我们遇到异步场景最多的就是接口请求，那么这里就以jquery中的$.get为例简单展示一下如何配合async/await来解决这个场景。

// 先定义接口请求的方法，由于jquery封装的几个请求方法都是返回Promise实例，因此可以直接使用await函数实现同步
const getUserInfo = () => $.get("xxxx/api/xx");

const clickHandler = async () => {
    try {
        const resp = await getUserInfo();
        // resp为接口返回内容，接下来利用它来处理对应的逻辑
        console.log(resp);

        // do something
    } catch (e) {
        // 处理错误逻辑
    }
}

为了保证逻辑的完整性，在实践中try/catch必不可少。总之，不处理错误逻辑的程序员不是好程序员。

与Promise相比，个人认为async/await有一定的简洁性，但也并非就比Promise有绝对的优势，因此只能算是提供了另外一种同样很棒的方式，至于大家学习之后选择哪种方式来解决自己的问题，我认为这仅仅只是个人的喜好问题。

混合云服务器托管 async await js异步解决方案数据如何更好的分析 js 异步解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92095.html

如何更好的编写async函数

摘要：一个简单的转换为的例子我们调用函数返回一个的实例，在实例化的过程中进行文件的读取，当文件读取的回调触发式，进行状态的变更，或者状态的变更我们使用来监听，第一个回调为的处理，第二个回调为的处理。 2018年已经到了5月份，node的4.x版本也已经停止了维护我司的某个服务也已经切到了8.x，目前正在做koa2.x的迁移将之前的generator全部替换为async 但是，在替换...

isaced 2019-08-22 17:11 评论0 收藏0
async & await (译)

摘要：的出现，让我们可以走出回调地狱，着实惊艳。我已经开始使用里的和关键字来简化的处理。异步任务在这个例子是执行之后，一直在执行完成才继续下一个任务并没有产生阻塞。最后这个函数处理了返回值并且返回了一个对象。依然很棒，但和使得它可维护性更好。 JavaScript Promises的出现，让我们可以走出回调地狱，着实惊艳。Promises 允许我们更好的引入和处理异步任务，虽然如此，但引入好...

The question 2019-08-22 11:07 评论0 收藏0
【面试篇】寒冬求职季之你必须要懂的原生JS(中)

摘要：如果你还没读过上篇上篇和中篇并无依赖关系，您可以读过本文之后再阅读上篇，可戳面试篇寒冬求职季之你必须要懂的原生上小姐姐花了近百个小时才完成这篇文章，篇幅较长，希望大家阅读时多花点耐心，力求真正的掌握相关知识点。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原型链，就能获得...

andycall 2019-05-23 16:26 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
[翻译] Async/Await 使你的代码更简洁

摘要：取而代之，利用事件循环体系，使用了一种类似语法的工作方式一旦非阻塞的异步操作完成之后，就可以让开发者分配的回调函数被触发。第一个尝试嵌套的回调函数下面是使用嵌套的回调函数的实现方法这可能对于任何使用者来说再熟悉不过了。写在文章前这篇文章翻译自 ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER,这是一篇写于2017年八月的文章，并由某专栏提名为17年十大...

hightopo 2019-08-26 11:31 评论0 收藏0