JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/

JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题。以往在浏览器中,因为与服务器通讯是一种比较昂贵的操作,因此比较复杂的业务逻辑往往都放在服务器端,前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据。

但是到了 webapp 风行的时代,前端业务逻辑越来越复杂,往往几个 AJAX 请求之间互有依赖,有些请求依赖前面请求的数据,有些请求需要并行进行。还有在类似 node.js 的后端 JavaScript 环境中,因为需要进行大量 IO 操作,问题更加明显。这个时候使用回调函数来组织代码往往会导致代码难以阅读。

现在比较流行的解决这个问题的方法是使用 Promise,可以将嵌套的回调函数展平。但是写代码和阅读依然有额外的负担。

另外一个方案是使用 ES6 中新增的 generator,因为 generator 的本质是可以将一个函数执行暂停,并保存上下文,再次调用时恢复当时的状态。co 模块是个不错的封装。但是这样略微有些滥用 generator 特性的感觉。

ES7 中有了更加标准的解决方案,新增了 async/await 两个关键词。async 可以声明一个异步函数,此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve,并拿到结果。

比如下面的例子,以往我们无法在 JavaScript 中使用常见的 sleep 函数,只能使用 setTimeout 来注册一个回调函数,在指定的时间之后再执行。有了 async/await 之后,我们就可以这样实现了:

async function sleep(timeout) {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      resolve();
    }, timeout);
  });
}

(async function() {
  console.log(‘Do some thing, ‘ + new Date());
  await sleep(3000);
  console.log(‘Do other things, ‘ + new Date());
})();

执行此段代码,可以在终端中看到结果:

Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)
Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)

另外 async 函数可以正常的返回结果和抛出异常。await 函数调用即可拿到结果,在外面包上 try/catch 就可以捕获异常。下面是一个从豆瓣 API 获取数据的例子:

var fetchDoubanApi = function() {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          var response;
          try {
            response = JSON.parse(xhr.responseText);
          } catch (e) {
            reject(e);
          }
          if (response) {
            resolve(response, xhr.status, xhr);
          }
        } else {
          reject(xhr);
        }
      }
    };
    xhr.open(‘GET‘, ‘https://api.douban.com/v2/user/aisk‘, true);
    xhr.setRequestHeader("Content-Type", "text/plain");
    xhr.send(data);
  });
};

(async function() {
  try {
    let result = await fetchDoubanApi();
    console.log(result);
  } catch (e) {
    console.log(e);
  }
})();

ES7 还在草案阶段,那现在想用这个特性怎么办?可以尝试 google 的一个 JavaScript 预编译器 traceur,可以将高版本的 JavaScript 编译为 ES5 代码,已经实验性的支持了 async/await (需要使用 --experimental 来指定开启)。traceur 可以直接在后端使用,也可以在浏览器中使用。另外如果只在 node.js 环境中使用的话,还有一些 polyfill 模块,比如这个

时间: 2025-01-13 04:29:59

JavaScript ES7 中使用 async/await 解决回调函数嵌套问题的相关文章

js执行顺序/Promise优雅解决回调函数嵌套

先执行同步 然后把settimeout(function xx(){}放进堆栈 然后执行回调 function xx() /** * Created by Administrator on 2016/10/28. */ // nodejs 封装操作文件的功能 fs var fs = require('fs'); //同步读取 // var str = '' // str += fs.readFileSync('./data/01','utf-8'); // str += fs.readFileS

理解ES7中的async/await

优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async wait的简写,因此可以理解 async 用于声明一个function是异步的,而await用于等待一个异步方法执行完成返回的值(返回值可以是一个Promise对象或普通返回的值).注意:await 只能出现在 async函数中. 1-1 async的作用?首先来理解async函数是怎么处理返回值的,我们以前写代码都是通过return语句返回我们想

不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)

在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www.google.com.hk"; $result = file_get_contents($url); echo $result; 当代码执行到第二行时,程序便陷入了等待,直到请求完成,程序才会继续往下跑将抓取到的html输出.这种做法的好处是代码简洁明了,运行流程清晰, 容易维护. 缺点就是程序的运

ES7中的async和await

ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的最后,遇到了一个问题,就是如果要对已经获得数据数组进行遍历,并在遍历中继续对每一条数据做异步请求操作,这就构成了一个树状查询. 蠢办法 对于上述问题,我们完全可以用上一章中的垃圾代码来构建一个for循环的嵌套then! 但上一章已经说过,千万不要写出这种垃圾代码,所以如果你的node或者浏览器并不支

[C#] .NET4.0中使用4.5中的 async/await 功能实现异步

在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去,建议直接使用.NET Framework 4.5吧:但是如果已经发布了,又不想用户重新升级框架到.NET Framework 4.5,那也有一个办法,那就是使用库:Microsoft.Bcl.Async 在4.5中使用async/await 的地方如下: 好处呢,我不多说,我想说的是: What

android中出现的多处回调函数

回调函数的概念 android中出现的多处回调函数,比如去override 一些函数 OnCreate等等 http://www.cnblogs.com/codingmyworld/archive/2011/07/22/2113514.html android中出现的多处回调函数,布布扣,bubuko.com

nodejs批量导入数据eventproxy(回调函数嵌套解决方案)使用实例

回调函数嵌套解决方案——eventProxy API地址:https://github.com/JacksonTian/eventproxy 1.安装eventproxy 执行npm install eventProxy. 2.使用前进行声明,代码如下: var EP = require('eventproxy'); 3.根据API进行相应的方法调用,代码如下: ajax.post('/user/login', { name: '********', pwd: '******', remembe

Javascript中的async await

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享async / await是如何工作的,阅读本文前,希望你具备Promise.generator.yield等ES6的相关知识. 在详细介绍async / await之前,先回顾下目前在ES6中比较好的异步处理办法.下面的例子中数据请求用Node.js中的request模块,数据接口采用Github v3

ES7中的async 和 await

async 和 await 一个函数如果加上 async ,那么该函数就会返回一个 Promise async function test() { return "1" } console.log(test()) // -> Promise {<resolved>: "1"} async 就是将函数返回值使用 Promise.resolve() 包裹了下,和 then 中处理返回值一样,并且 await 只能配套 async 使用. async f