一、前言

在项目中经常遇到处理异步请求的情况,面对层层的嵌套,回调显示那么苍白无力;

async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,既然这样就用上吧。

二、配置编译

网上实践很多。。。

反倒是Promise在实践过程中加了一个polyfill。

三、实践

await后方法要写成peomise的形式,转成异步形式。大概如下,这样异步操作看起来就像同步操作一样明了。

四、测试

(async function(){
      let step_1 = await step1(); //异步1

      console.log(step_1.result); //同步2
      console.log('step2');       //同步2

      let step_3 = await step3(); //异步3

      console.log(step_3); //同步4
      console.log('step4');       //同步4

    })().catch(err=>{
      console.log(err);
    });

    function step1(){
      return new Promise((resolve, reject) => {
        setTimeout(()=>{
          if(1){
            resolve({
              result:'我是异步step_1返回的数据'
            })
          }else{
            reject()
          }
        },2000);
      })
    }

    function step3(){
      return new Promise((resolve, reject) => {
        setTimeout(()=>{
          if(1){
            resolve('我是异步step_2返回的数据')
          }else{
            reject()
          }
        },2000);
      })
    }

 

 

五、node v7.5以上原生支持async/await

如果不想更新node,可以使用babel

$ npm install --save-dev babel-cli  

$ npm install --save-dev babel-preset-es2015 babel-preset-es2017

 

创建: .babelrc文件

{
 "presets": ["es2015","es2017"]
 }

 

//执行
babel-node xxx.js

  

 

  

关于ES7中的async/await在客户端和服务端上的实践的更多相关文章

  1. 理解ES7中的async/await

    理解ES7中的async/await 优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async w ...

  2. 网络编程 UDP协议 TCP局域网客户端与服务端上传下载电影示例

    UDP协议 (了解) 称之为数据包协议,又称不可靠协议. 特点: 1) 不需要建立链接. 2) 不需要知道对方是否收到. 3) 数据不安全 4) 传输速度快 5)能支持并发 6) 不会粘包 7) 无需 ...

  3. 编写Java程序,实现客户端向服务端上传文件的功能

    查看本章节 查看作业目录 需求说明: 实现客户端向服务端上传文件的功能 当启动服务端后,运行客户端程序,系统提示客户在客户端输入上传文件的完整路径.当客户在客户端输入完成后,服务端实现文件上传 实现思 ...

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

    原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...

  5. ES7中的async和await

    ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的 ...

  6. js中的async await

    JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持! 如果开发中使用了babel转码,那么就放心大胆的用吧. ...

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

    好东西需要分享 原文出自:http://www.itnose.net/detail/6091186.html 在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framew ...

  8. 【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。

    [TypeScript]如何在TypeScript中使用async/await,让你的代码更像C#. async/await 提到这个东西,大家应该都很熟悉.最出名的可能就是C#中的,但也有其它语言也 ...

  9. 在Silverlight中使用async/await

    现在 async/await 大行其道,确实,有了 async/await ,异步编程真是简单多了,个人觉得 async/await 的出现,给开发者还来的方便,绝不亚于当年 linq 的出现. 但要 ...

随机推荐

  1. PV 动态供给 - 每天5分钟玩转 Docker 容器技术(153)

    前面的例子中,我们提前创建了 PV,然后通过 PVC 申请 PV 并在 Pod 中使用,这种方式叫做静态供给(Static Provision). 与之对应的是动态供给(Dynamical Provi ...

  2. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  3. 非黑即白--谷歌OCR光学字符识别

    # coding=utf-8 #非黑即白--谷歌OCR光学字符识别 # 颜色的世界里,非黑即白.computer表示深信不疑. # 今天研究一下OCR光学识别庞大领域中的众多分支里的一个开源项目的一个 ...

  4. requests+xpath+map爬取百度贴吧

    # requests+xpath+map爬取百度贴吧 # 目标内容:跟帖用户名,跟帖内容,跟帖时间 # 分解: # requests获取网页 # xpath提取内容 # map实现多线程爬虫 impo ...

  5. PHP 常用header头定义

    在php的开发中,我们常常需要使用到header函数头来进行做标记 header() 函数向客户端发送原始的 HTTP 报头. 常用header设置列表如下: header('HTTP/1.1 200 ...

  6. jquery ajax 发送邮件例子

    <div class="form"> <dl> <dt>您的称呼<small>(必填)</small></dt&g ...

  7. [LeetCode] Shopping Offers 购物优惠

    In LeetCode Store, there are some kinds of items to sell. Each item has a price. However, there are ...

  8. 实验吧_Guess Next Session&Once More(代码审计)

    Guess Next Session 看题目提示,是一道代码审计: <?php session_start(); if (isset ($_GET['password'])) { if ($_G ...

  9. osx mitmproxy ssl 错误

    记录一下,总是在这里折腾. cd ~ cd .mitmproxy cp mitmproxy-ca-cert.pem ~/ 然后到目录下双击mitmproxy-ca-cert.pem ,在钥匙串中的登录 ...

  10. Go学习——go+channel实战(转)

    转载:http://studygolang.com/articles/2423 背景 在最近开发的项目中,后端需要编写许多提供HTTP接口的API,另外技术选型相对宽松,因此选择Golang + Be ...