async/await和promise的区别详解_前端异步编程面试题

async

async函数定义

async 函数是通过 async 关键字声明的函数类型。由于 async 是“异步”（asynchronous）的缩写，该关键字明确标识了这是一个异步函数。

作用

主要解决由异步编程逻辑引发的潜在 bug。

####async函数的语法

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

参数：name 表示函数名称。

param 表示传递给函数的参数列表。

statements 代表函数体内的表达式，其中可以包含 await 关键字。

返回值：始终返回一个新的 Promise 对象。该 Promise 的状态由 async 函数的返回值决定：若函数正常返回，Promise 会被解决（resolved），值为返回结果；若函数抛出异常或存在未捕获的错误，Promise 会被拒绝（rejected），错误信息为抛出的异常。

下面为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 中。

例如，如下代码:

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 意为“等待”，用于暂停当前 async 函数的执行，直到其后的操作完成。

作用

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区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

前端面试题解析：async/await 与 Promise 的核心区别