ES6 async/await语法

Async/await的主要益处是可以避免回调地狱(callback hell)问题

Chromium JavaScript引擎 从v5.5开始支持async/await功能,Chromium JavaScript引擎版本号的查看方法是:在浏览器地址栏输入 chrome://version,查询出来的信息如下图所示:

这意味着async/await不再是实验性功能,使用它时无需指定--harmony参数,此参数用来开启那些几乎已完成但被V8团队认为还不稳定的功能。不同的node版本使用不同的V8引擎,查看方式是:

Node.js 7.6正式默认支持async/await功能

async-await语法介绍

在函数,匿名函数,箭头函数,变量,类中加上关键字async就行了

async function asyncFunc() {}

const asyncFunc = async function() {}

async function() {}

async () => {}

class someClass {
    async asyncFunc() {}
}

function前面加上async关键字,表示该function需要执行异步代码。 async function函数体内可以使用await关键字,且await关键字只能出现在async function函数体内。

await关键字可以跟在任意变量或者表达式之前,await后面通常会跟一个异步过程,如下

async function asyncFunc() {
    await somePromise;
}

async function的返回值

async function固定会返回一个promise,即便函数体里面没有调用return。由于async function返回一个promise,所以可以写在await后面,类似这样

async function asyncFun1() {}
async function asyncFun2() {
    await asyncFun1();
}
async function asyncFun3() {
    await asyncFun2();
}
asyncFun3();

等效于:
async function asyncFun1() {}
async function asyncFun2() {}
async function asyncFun3() {
    await asyncFun1();
    await asyncFun2();
}
asyncFun3();

如果有return,return后面的值都会被包装成一个promise执行正确的回调函数,所以return ‘foo‘会被包装成return Promise.resolve(‘foo‘)。

React中使用jQuery $.ajax Promise避免回调地狱的语法

componentDidMount() {
    const self = this;
    // 获取用户名
    $.ajax(‘get_my_name‘)
    .then(name => {
        // 根据用户名获取个人信息
        // 链式Promise
        return $.ajax(`get_my_info_by_name‘?name=${name}`);
    }).then(function(info) {
        self.setSate({info});
    }).catch(function(err) => {
        console.error(err);
    });
}

React中使用async,await的避免回调地狱的语法

async componentDidMount() {
    try {
        // 获取用户名
        const name = await $.ajax(‘get_my_name‘);
        // 根据用户名获取个人信息
        const info = await $.ajax(`get_my_info_by_name‘?name=${name}`);
        this.setSate({info});
    } catch(err) {
        console.error(err);
    }
}

可以看出,async,await的写法更优雅

本文参考:

【1】Node 7.6默认支持Async/Await

【2】Hey async,await me

时间: 2024-10-06 19:17:32

ES6 async/await语法的相关文章

ES6 Async/Await 完爆Promise的6个原因

自从Node的7.6版本,已经默认支持async/await特性了.如果你还没有使用过他,或者对他的用法不太了解,这篇文章会告诉你为什么这个特性"不容错过".本文辅以大量实例,相信你能很轻松的看懂,并了解Javascript处理异步的一大杀器. 文章灵感和内容借鉴了6 Reasons Why JavaScript's Async/Await Blows Promises Away (Tutorial),英文好的同学可以直接戳原版参考. 初识Async/await 对于还不了解Async

小程序里使用es7的async await语法

我们做小程序开发时,有时候想让自己代码变得整洁,异步操作时避免回调地狱.我们会使用es6的promise. es7的async,await .promise在小程序和云开发的云函数里都可以使用. async和await只能在云开发的云函数里使用.我们在小程序的代码里直接使用,就会报如下错误. 这个报错就是告诉我们不能在小程序里直接使用es7的async和await语法.但是这么好的语法我们用起来确实显得代码整洁,逼格高.那接下来我就教大家如何在小程序代码里使用es7的async和await语法.

从不用 try-catch 实现的 async/await 语法说错误处理

前不久看到 Dima Grossman 写的 How to write async await without try-catch blocks in Javascript.看到标题的时候,我感到非常好奇.我知道虽然在异步程序中可以不使用 try-catch 配合 async/await 来处理错误,但是处理方式并不能与 async/await 配合得很好,所以很想知道到底有什么办法会比 try-catch 更好用. Dima 去除 try-catch 的方法 当然套路依旧,Dima 讲到了回调

ES6 async await

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>async-await</title> 6 </head> 7 <body> 8 <h3>ES6 async 函数用法</h3> 9 10 <script> 11 12 wind

JS学习- ES6 async await使用

async 函数是什么?一句话,它就是 Generator 函数的语法糖. 使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起来很冗余,这时我们可以用async函数. 比如我们有两个请求,如下,这里用的axios: function getCode(){ return axios.get('json/code.json'); } function getlist(params){ return axios.get('jso

async包 ES6 async/await的区别

最基本的async 包 ApCollection.find({}).toArray(function (err, aps) { var num = 0; async.whilst( function () { return num++ < aps.length; }, function (callback) { if (aps[num]) { var apmac = aps[num].AP_MAC; ApHeartCollection.findOne({ AP_MAC: apmac, time:

async/await语法总结

console.dir(Promise); const p = new Promise((resolve, reject) => { reject("失败"); resolve("成功!"); }) async function getA(){ // await后是一个Promise,如果不是也会默认转为一个Promise // 如果Promise执行结果为resolve,则await返回resolve参数,await下面的代码都会执行,且async函数后的t

体验异步的终极解决方案-ES7的Async/Await

阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解.本文以体验为主,不会深入说明,结尾有详细的文章引用. 第一个例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子. 这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行. 1 var sleep = function (time) { 2 return new Promise(function (resolve, reject) { 3 setTimeout(function

js异步回调Async/Await与Promise区别 新学习使用Async/Await

Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面一起来看看这篇文章:Async/Await替代Promise的6个理由. 什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. async/await与Prom