前端常见面试题之async/await和promise的区别

目录
  • async
    • async函数定义
    • 作用
    • async 函数中 return 值如何接受
    • 方式一
    • 方式二
  • await
    • await定义
    • 作用
    • 关于await的注意点
    • [[promiseValue]]
    • [promiseValue]哪些能赋值
    • 三者的区别
    • 为什么async/await更好？
  • 总结

async

async函数定义

async函数是使用关键字声明的函数。async 是“异步”的简写，所以应该很好理解 async 用于申明一个 function 是异步的。

作用

用于解决：异步程序产生的bug

####async函数的语法

async function name([param[, param[, ... param]]]) {
    statements
}

参数：name 函数名称

​ param 要传递给函数的参数的名称

​ statements 包含函数主体的表达式 ，可以使用await

返回值： 一个全新的promise，这个promise要么会通过一个由async函数返回的值被解决，要么会通过一个从async函数中抛出的（或其中没有被捕获到的）异常被拒绝

下面为async的具体使用实例：

 async function foo(p) {
        console.log("foo run",p);
        return 1;
      }
      var res = foo(1);
      console.log(res);//{<fulfilled>: 1}

async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise，那么它将会被隐式地包装在一个promise中。

例如，如下代码:

async function foo() {
     //promise.[[promiseValue]]
   return 1
}
//等价于
function foo() {
   return Promise.resolve(1)
}//{<fulfilled>: 1}

下面是对async的一些补充：

  • async 本身是一个语法糖—>语法糖：带有一定功能的关键字

    • 语法糖的作用：能够减少代码量、增加程序的可读性，从而减少程序代码出错的机会

async 函数中 return 值如何接受

方式一

通过 promise.then-cb 形参获取

 async function foo(){
            console.log(222222);
            return 123;
        }
let res = foo();
 res.then(data=>{
            console.log(data);//123
        })

方式二

第二种接受函数返回值的方式是 await

  (async function (){
           console.log('async run');
           //第二种接受函数返回值的方式是 await
           let res = await foo();
           console.log(res);
       })()
 async function foo(){
           console.log('foo run');
           return 123;
       }
 //res作用：接受 async foo函数返回值 是promise
let res = foo();

await

await定义

await 的意思是等待，所以应该很好理解，await 等待某个操作完成。

作用

await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值（await 作用是获取promise.[[promiseValue]]的值）

关于await的注意点

  • await 必须写在 async 中
  • await 后是一个promise实例对象

[[promiseValue]]

[[PromiseValue]]是个内部变量，外部无法得到，只能在then中获取。

[promiseValue]哪些能赋值

  • async函数的return
  • new promise 中 resolve实参
  • then 中 return （catch finally 中的return）
  • promise.reslove()实参 promise.reject()实参

三者的区别

  • promise和 async/await都是解决异步编程的一种方式，但是async/await使得异步代码看起来像同步代码。
  • 函数前面多了一个async关键字。await关键字只能用于async定于的函数内。async函数会隐式地返回一个Promise,该promise的resolve值就是return的值。

为什么async/await更好？

使用async函数可以让代码简洁很多，不需要像Promise一样需要then,不需要写匿名函数处理Promise的resolve的值，也不需要定义多余的data变量，还避免了嵌套代码。

async/await 让 try/catch可以同时处理同步和异步的错误。在下面的示例中，try/catch不能处理JSON.parse的错误，因为它在Promise中,我们需要使用.catch,这样的错误会显得代码非常的冗余。

总结

到此这篇关于前端常见面试题之async/await和promise区别的文章就介绍到这了,更多相关async/await和promise区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Javascript的promise,async和await的区别详解

    终于把promise, async, await的区别和联系弄清楚了,看下面代码 写法1,2是promise的写法 写法6是async和await的写法 主要看第2种写法和第6中写法即可, 第2种写法是promise的典型写法,第6中写法是async, await的典型写法 // 以下三个请求依次执行 req1 = () => { return fetch("http://example.com/api/v1/get")} req2 = () => { return fet

  • async/await与promise（nodejs中的异步操作问题）

    举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa

  • 详解JavaScript Promise和Async/Await

    详解JavaScript Promise和Async/Await

    概述 一般在开发中,查询网络API操作时往往是比较耗时的,这意味着可能需要一段时间的等待才能获得响应.因此,为了避免程序在请求时无响应的情况,异步编程就成为了开发人员的一项基本技能. 在JavaScript中处理异步操作时,通常我们经常会听到 "Promise "这个概念.但要理解它的工作原理及使用方法可能会比较抽象和难以理解. 四个示例 那么,在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法,所以与许多传统干巴巴的教程都不同,我们将通过以下四个示例开始: 示例1:用生

  • Async/Await替代Promise的6个理由

    前言 Node.js 7.6 已经支持 async/await 了,如果你还没有试过,这篇博客将告诉你为什么要用它. Async/Await 简介 对于从未听说过 async/await 的朋友,下面是简介: async/await 是写异步代码的新方式,以前的方法有回调函数和Promise. async/await 是基于 Promise 实现的,它不能用于普通的回调函数. async/await 与 Promise 一样,是非阻塞的. async/await 使得异步代码看起来像同步代码,这

  • 前端常见面试题之async/await和promise的区别

    目录 async async函数定义 作用 async 函数中 return 值如何接受 方式一 方式二 await await定义 作用 关于await的注意点 [[promiseValue]] [promiseValue]哪些能赋值 三者的区别 为什么async/await更好? 总结 async async函数定义 async函数是使用关键字声明的函数.async 是“异步”的简写,所以应该很好理解 async 用于申明一个 function 是异步的. 作用 用于解决:异步程序产生的bu

  • 一道常被人轻视的web前端常见面试题(JS)

    一道常被人轻视的web前端常见面试题(JS)

    面试题是招聘公司和开发者都非常关心的话题,公司希望通过它了解开发者的真实水平和细节处理能力,而开发者希望能够最大程度地展示自己的水平(甚至超常发挥).本文提供了众多前端开发面试题,无论是招聘方还是应聘方都值得一看! 前言 年前刚刚离职了,分享下我曾经出过的一道面试题,此题是我出的一套前端面试题中的最后一题,用来考核面试者的JavaScript的综合能力,很可惜到目前为止的将近两年中,几乎没有人能够完全答对,并非多难只是因为大多面试者过于轻视他. 题目如下: function Foo() { ge

  • C#中try...catch的使用与常见面试题分享

    C#中try...catch的使用与常见面试题分享

    前言 C#中Try-Catch语句大家都很熟悉了,但是细究起来,还是有很多东西可讲的.最近在翻看之前总结的常见面试题中,发现关于try...catch异常处理的还是蛮多了,今天看到这个面试题,也就重新学习一下. try..catch语法 try-catch语句由一个try块后跟一个或多个catch子句构成,这些子句制定不同的异常处理程序. 引发异常时,公共语言运行时(CLR)会查找处理此异常的catch语句.如果当前执行的方法不包含这样的catch块,则CLR会查看调用当前方法的方法,然后会遍历

  • Vue常见面试题整理【值得收藏】

    看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题.(都是一些基础的vue面试题,大神不用浪费时间往下看) 一.对于MVVM的理解? MVVM是Model-View-ViewModel的缩写. Model :代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑. View :代表UI组件,它负责将数据模型转化成UI展现出

  • 10道springboot常见面试题

    本文为大家分享了10道springboot常见面试题,供大家参考,具体内容如下 1.什么是Spring Boot? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用的所有Spring项目的不同功能. 如果必须启动一个新的Spring项目,我们必须添加构建路径或添加Maven依赖关系,配置应用程序服务器,添加spring配置. 因此,开始一个新的spring项目需要很多努力,因为我们现在必

  • JAVA中String介绍及常见面试题小结

    字符串广泛应用 在 Java 编程中,在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 深刻认识String 1)String为字符串常量:即String对象一旦创建之后该对象是不可更改的.(源码如下) String str1 = "abc"; String str2 = "abc"; String str3 = new String("abc"); System.out.println(str1 == st

  • java对象拷贝常见面试题及应答汇总

    为什么要使用克隆? 想对一个对象进行处理,又想保留原有的数据进行接下来的操作,就需要克隆了,Java语言中克隆针对的是类的实例. 如何实现对象克隆? 有两种方式: 实现Cloneable接口并重写Object类中的clone()方法:实现Serializable接口,通过对象的序列化和反序列化实现克隆,可以实现真正的深度克隆,代码如下: import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; impor

  • python3字符串输出常见面试题总结

    考察对于知识的理解,除了实际的代码运用,还有一种方法就是问答类的题型.不同于普通的概念叙述,小编认为即使是面试题也会带有一些数学题目的影响,不知道大家有没有想过,如果面试题是字符串方面的我们该如何作答呢?一些小伙伴也要迎来寒假的实习,小编整理了这方面的题目,我们来看看有哪些面试题. 1.将一个字符串str的内容颠倒过来,并输出.str的长度不超过100个字符. x=input("") x=x[::-1] #列表切片,逆序输出 print(x) 2.字符串的输入输出处理. n=int(i

  • Java常见面试题之final在java中的作用是什么

    谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字. 另外,Java中的String类就是一个final类. 一.final关键字的基本用法 在Java中,final关键字可以用来修饰类.方法和变量(包括成员变量和局部变量).下面就从这三个方面来了解一下final关键字的基本用法. 1.修饰类 当用final修饰一个类时,表明这个类不能被继承.也就是说,如果一个类你永远不会让他被继承,就可以用final进行修饰.final类中的成员变量可以根据需要设为

  • R语言常见面试题整理

    尊敬的读者,这些R语言面试题是专门设计的,以便您应对在R语言相关面试中可能会被问到的问题. 根据我的经验,良好的面试官几乎不打算在你的面试中问任何特定的问题,通常都是以如下的问题为开端进一步展开后继的问题. 什么是R语言编程? R语言是一种用于统计分析和为此目的创建图形的编程语言.不是数据类型,它具有用于计算的数据对象.它用于数据挖掘,回归分析,概率估计等领域,使用其中可用的许多软件包. R语言中的不同数据对象是什么? 它们是R语言中的6个数据对象.它们是向量,列表,数组,矩阵,数据框和表. 什

随机推荐