前端常见面试题之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区别内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！