async-await消灭异步回调实例详解

目录
  • 引言
  • 一、走进Async-await原理
    • 1、原理1
    • 2、原理2
    • 3、原理3
    • 4、原理4
  • 二、深入Async-await规则
    • 1、async封装Promise
    • 2、await相当于then
    • 3、多个await时,按时序执行
    • 4、try…catch相当于catch
  • 三、解析Async-await语法
  • 四、拓展Async-await应用
    • 1、场景1
  • 总结

引言

本篇,带你读懂async~await间的浪漫。

关于异步处理问题,ES5的回调让我们陷入回调地狱轮回,后来ES6的Promise(Promise不了解?点这了解)让我们脱离轮回,终于,ES7的async-await带我们走向光明。今天我们就来学习一夏 async-await,看看与Promise有何联系和区别。

一、走进Async-await原理

1、原理1

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。举例说明:

// async返回的是Promise对象?
async function testAsync() {
    return 'hello';//上篇文章Promise对象的返回值如果不是Promise,会通过Promise.resolve()转化为Promise,再进行处理
}
const result = testAsync()
console.log(result);//Promise { 'hello' }  说明async返回的是Promise对象

那既然async返回的是Promise对象,那么async后面的函数可以接.then()或者.catch()...嘛?我们试一试就知道了。

// async返回的是Promise对象,并且可以接Promise的方法?
async function testAsync() {
    // await await等待还是promise对象
    return 'hello'
}
testAsync()
    .then((result)=>{
        console.log(result);
    })
    .catch((error)=>{
        console.log(error);
    })
//hello  妈耶!打印了!说明async返回的是Promise对象,并且可以接Promise的方法,并且!!!默认状态是resolved的

上面代码说明,async函数内部return语句返回的值,会成为then方法回调函数的参数

2、原理2

当async函数内部抛出错误的时候,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被.then()方法的第二个回调函数接收或者.catch()方法回调函数接收到。

// async函数内部抛出错误或者Promise状态为reject
async function testError(){
    //throw new Error('出错啦~~');
    await Promise.reject('出错了');//await前面有return和没有return效果一样
}
testError()
    // .then(()=>{},(error)=>{console.log(error);})
    .catch(error=>{console.log(error);})
//Error: 出错啦~~

3、原理3

await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。代码说明:

// await
async function getName(){
    // return '来自星星的你';
    return await '来自星星的你';//上面直接return等价于这个return
}
getName()
    .then(result=>{console.log(result);})
//来自星星的你

4、原理4

await的使用,必须要有async。这便是async-await的浪漫所在了:async返回的是一个Promise对象,await等待的就是这个Promise对象,所以await不能没有async(但是async可以没有await)。有没有被浪漫到?反正我是醉了。如果await没有async会怎么样?报错:

// await没有async会报错
function testAwait(){
    return await '西红柿炒辣椒'
}
testAwait()
    .catch(error=>{
        console.log(error);
    })
//SyntaxError: await is only valid in async function

二、深入Async-await规则

1、async封装Promise

// async封装Promise
async function fn1() {
    return '喜羊羊与灰太狼';// //相当于return Promise.resolve('喜羊羊与灰太狼')
    const data = await fn1();//接收data值
}
fn1()//执行async函数,返回的是一个Promise对象
    .then(data => {
        console.log('content =', data)
    })
​
//content = 喜羊羊与灰太狼

2、await相当于then

// await---.then()
async function getName(){
    const operate=Promise.resolve('白雪公主')//执行函数
    const name= await operate //await相当于Promise的then  operate.then(name=>{})
    console.log('name:',name)
}
getName();
( async function(){
    const person=await '七个小矮人' //await Promise.resolve('七个小矮人') await后面不跟Promise,也会被封装成Promise
    console.log('person:',person)//400
})();//自执行函数
​
//name: 白雪公主
//person: 七个小矮人

3、多个await时,按时序执行

当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行。

async function testOrder() {
    await Promise.reject('出错了')//UnhandledPromiseRejectionWarning: 出错了
    await Promise.resolve('hello world'); // 不会执行
}
testOrder();

4、try…catch相当于catch

如果希望即使前一个异步操作失败,也不要中断后面的异步操作。可将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

// try...catch
!(async function () {
    const testError = Promise.reject('出错啦~~~')//rejected状态
    // const testError=throw new Error('出错啦~~~');
    try {
        const result = await testError; //await相当于then,但是reject不会触发then
        console.log('success:'+result) //不会输出,因为const result = await testError被报错,被catch捕获
    } catch (error) {
        console.error('error:'+error)//try...catch 相当于Promise的catch
    }
​
})()
//error:出错啦~~~

当await后面是Promise对象的时候,我们也可直接在await后面直接.catch捕获错误:

async function testError() {
    await Promise.reject('出错了')
        .catch(error => console.log(error));//这里捕获错误,不会影响下一个await执行

    return await Promise.resolve('hello world');
}
​
testError()
    .then(result => console.log(result))

三、解析Async-await语法

我们浅浅看一个面试题:

// 面试题
function getJSON() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(2);
            resolve(2)
        }, 2000)
    })
}
async function testAsync() {
    await getJSON()
    console.log(3);
}
testAsync()
//2
//3

问题当然不会问打印顺序啦,问题是将async await语句解析翻译为Promise?

根据现在的知识面,我们必须知道:

(1)await不能单独出现,其函数前面一定要有async。

(2)await会干两件事:

第一,将写在await后面的代码放到async创建的那个Promise里面执行。

第二、将写在await下面的代码放到前一个创建的那个Promise对象的.then里面执行。

(3)await返回的也是Promise对象,他只是把await下面的代码放到了await返回的promise的.then里面执行。

这样的话,是不是如鱼得水了。翻译如下:

function getJSON() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(2);
            resolve(2)
        }, 2000)
    })
}
// 编译成Promise原理
function testAsync() {
    return Promise.resolve().then(() => {
        return getJSON();
    })
        .then(() => {
            console.log(3);
​
        })
}
testAsync()

四、拓展Async-await应用

1、场景1

你学废async-await了嘛?还记得上一篇开篇的回调地狱嘛?我们通过Promise解决回调是这样的:

// Promise解决方式
function doCallback(n) {
    var myPromise = new Promise(function (resolve, reject) {
        //处理异步任务
        var flag = true;
        setTimeout(function () {
            if (flag) {
                resolve(n)
            }
            else {
                reject('失败')
            }
        },0)
    })
    return myPromise;
}
​
doCallback(1)
    .then((result) => { //then是成功执行的方法 返回的还是一个Promise对象
        console.log(result);//打印张三  res是执行
        return fn(2);
    })
    .then((result) => {
        console.log(result);
        return fn(3)
    })
    .then((result) => {
        console.log(result);
        return fn(4)
    })
    .then((result) => {
        console.log(result);
    })
    .catch((result) => { //catch是失败执行的方法
        console.log(result);
    })
    //好多.then,形成.then链啦
//1
//2
//3
//4

通过以上Promise方法,可以明显解决回调地狱“向右移”的浮夸表现,但是,Promise是基于 then, catch 的链式调用,但也是基于回调函数。.then链多多少少还是违背原生代码,显得也不是很优雅。作为回调终极武器,async-await更加贴近于原生代码,我们看一下吧:

//封装一个返回promise的异步任务
function doCallback(str) {
    var myPromise = new Promise(function (resolve, reject) {
        var flag = true;
        setTimeout(function () {
            if (flag) {
                resolve(str)
            } else {
                reject('处理失败')
            }
        })
    })
    return myPromise;
}
​
//封装一个执行上述异步任务的async函数
async function testAsync() {
    var result1 = await doCallback(1);  //await直接拿到fn()返回的promise的数据,并且赋值给result
    var result2 = await doCallback(2);  //await 后面的代码,都可以看做是异步回调 callback 里的内容,都是异步的
    var result3 = await doCallback(3);
    var result4 = await doCallback(4);
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
}//这样是不是简洁优雅多了呢?
//执行函数
testAsync();
//1
//2
//3
//4

有了 async-await、promise 还有必要学习吗?通过上面async-await的解决方案可以瞧见,async / await 和 Promise 并不互斥,二者相辅相成。同时async / await 并不能改变异步的本质( js是单线程的,异步需要回调,都是要基于 event loop 来实现(什么是event loop?关注我,等我文章~))。

总结

现在知道了,async-await是promise的语法糖了吧,不仅让我们书写代码时更加流畅,而且增强了代码的可读性。特别注意的是:虽然async-await 是建立在 Promise机制之上的,但是并不能取代其地位,他们两者相辅相成,息息相关。

其实async-await不止是Promise的语法糖,还是Generator的语法糖,Generator是什么?更多关于async-await消灭异步回调的资料请关注我们其它相关文章!

(0)

相关推荐

  • async/await让异步操作同步执行的方法详解

    一.前言 我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了 二.异步操作会带来什么问题 异步操作可能会许多的问题,下面是常见的两种 1.函数执行的结果并不是按照顺序返回 function fn1(){ console.log(111) setTimeout(function(){ console.log('wait

  • vue中用 async/await 来处理异步操作

    昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了. 先说一下async的用法,它作为一个关键字放到函数前面, async function timeout() { return 'hello world'; } 只有一个作用, 它的调用会返回一个promise 对象.调用一下看看就知道了,怎么调用?async 函数也是函数,所以它的调用和普通函数的调用没有什么区别,直接加括号调用就可

  • JavaScript中async和await的使用及队列详情

    目录 一.宏任务和微任务的队列入门知识,可以参考之前的文章: 1.async && await概念 2.async && await基本使用 二.async&& await结合promise在面试时回遇到的队列问题 三.总结 一.宏任务和微任务的队列入门知识,可以参考之前的文章: [JavaScript的事件循环机制] 宏任务和微任务在前端面试中,被经常提及到,包括口头和笔试题 1.async && await概念 async: 使用asyn

  • vue中异步函数async和await的用法说明

    目录 异步函数async和await用法 async/await为什么叫异步 外异内同 异步函数async和await用法 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async函数 async function timeout() { return 'hello world'; } 语法很简单,就是在函数前面加上async关键字,来表示它是异步的,那怎么调用呢?

  • js异步之async和await实现同步写法

    首先我们假设有一方法 readFile 可以读取文件内容,  但是它是异步的. var gen = function* (){     var a = yield readFile('./a.txt');     console.log(a.toString());     var b = yield readFile('./b.txt');     console.log(b.toString()); }; 首先我们看下上面的代码,如果我们将function 后面的 * 改成 async,将y

  • async-await消灭异步回调实例详解

    目录 引言 一.走进Async-await原理 1.原理1 2.原理2 3.原理3 4.原理4 二.深入Async-await规则 1.async封装Promise 2.await相当于then 3.多个await时,按时序执行 4.try…catch相当于catch 三.解析Async-await语法 四.拓展Async-await应用 1.场景1 总结 引言 本篇,带你读懂async~await间的浪漫. 关于异步处理问题,ES5的回调让我们陷入回调地狱轮回,后来ES6的Promise(Pr

  • Java CountDownLatch完成异步回调实例详解

    Java CountDownLatch完成异步回调实例详解 实例代码: public class AsyncDemo { private static void doSomeTask() { System.out.println("Hello World"); } private static void onCompletion() { System.out.println("All tasks finished"); } public static void ma

  • java 接口回调实例详解

    java 接口回调实例详解 首先官方对接口回调的定义是这样的,所谓回调:就是A类中调用B类中的某个方法C,然后B类中反过来调用A类中的方法D,D这个方法就叫回调方法.这样听起来有点绕,我们可以这么理解接口回调:比如我们想知道隔壁老王啥时候回家?但是我们有自己的事情做不能一直监视着老王,那么我们可以雇员小区的保安来完成这个任务,当老王回家口,保安就给我们打电话告诉我们,老王回来了!这样就完成了一个事件的传递: 首先我们定义了一个接口: public interface DynamicMessage

  • 关于async和await的一些误区实例详解

    微软官方的MSDN上说async和await是"异步",但是不少人(包括笔者自己)都有一些误区需要澄清:为什么await语句之后没有执行?不是异步吗? 先举一个示例代码如下: public partial class Form1 : Form { public async Task Processing() { await Task.Delay(5000); label1.Text = "Succuessful"; } public Form1() { Initia

  • async/await地狱该如何避免详解

    前言 async/await是什么 async/await可以说是co模块和生成器函数的语法糖.用更加清晰的语义解决js异步代码. 熟悉co模块的同学应该都知道,co模块是TJ大神写的一个使用生成器函数来解决异步流程的模块,可以看做是生成器函数的执行器.而async/await则是对co模块的升级,内置生成器函数的执行器,不再依赖co模块.同时,async返回的是Promise. 从上面来看,不管是co模块还是async/await,都是将Promise作为最基础的单元,对Promise不很了解

  • 基于javascript的异步编程实例详解

    本文实例讲述了基于javascript的异步编程.分享给大家供大家参考,具体如下: 异步函数这个术语有点名不副实,调用一个函数后,程序只在该函数返回后才能继续.JavaScript程序员如果称一个函数为异步的,其意思就是这个函数会导致将来再运行另一个函数,后者取自于事件队列.如果后面这个函数是作为参数传递给前者的,则称其为回调函数. callback 回调函数是异步编程最基本的方式. 采用这种方式,我们把同步操作变成了异步操作,主函数不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟

  • Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • Android AsyncTack 异步任务实例详解

    Android AsyncTack 异步任务 这里写一个小实例,来学习巩固Android AsyncTack 异步任务的知识,以便在项目中使用. 介绍一下如何使用 1, 继承AsyncTask public class MyTask extends AsyncTask<Params, Progrss, Result> 我们来说一下这三个泛型的作用: Params: 调用异步任务时传入的类型 ; Progress : 字面意思上说是进度条, 实际上就是动态的由子线程向主线程publish数据的类

  • 解析C#中委托的同步调用与异步调用(实例详解)

    委托的Invoke方法用来进行同步调用.同步调用也可以叫阻塞调用,它将阻塞当前线程,然后执行调用,调用完毕后再继续向下进行.同步调用的例子: 复制代码 代码如下: using System;using System.Threading;public delegate int AddHandler(int a, int b);public class Foo { static void Main() {  Console.WriteLine("**********SyncInvokeTest***

  • 如何在js代码中消灭for循环实例详解

    前言 这篇文章基于我在公司内部分享会整理而成.欢迎探讨补充. 补充一:看来很多人没看完文章就评论了.我在文章末尾说了,是不写 for 循环,不是不用 for 循环.简单陈述不写 for 循环的理由:for 循环易读性差,而且鼓励写指令式代码和执行副作用.更多参考这篇文章 补充二:回应大家的一些反对意见.本来准备专门写文章回应的,但是没时间,就简短回复,直接扔链接了. 1.for 循环性能最好.回应:微观层面的代码性能优化,不是你应该关注的.我在文章中演示了,对百万级数据的操作,reduce 只比

随机推荐