您现在的位置是:网站首页> 编程资料编程资料
前端常见面试题之async/await和promise的区别_node.js_
2023-05-24
442人已围观
简介 前端常见面试题之async/await和promise的区别_node.js_
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);//{: 1} async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。
例如,如下代码:
async function foo() { //promise.[[promiseValue]] return 1 } //等价于 function foo() { return Promise.resolve(1) }//{: 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区别内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- js实现动态加载数据瀑布流_javascript技巧_
- 小程序实现瀑布流动态加载列表_javascript技巧_
- echarts饼图指示器文字颜色设置不同实例详解_javascript技巧_
- uniapp引用echarts的详细步骤(附柱状图实例)_javascript技巧_
- vue中pc移动滚动穿透问题及解决_vue.js_
- ES6中async函数与await表达式的基本用法举例_javascript技巧_
- vue请求接口并且携带token的实现_vue.js_
- vue中的slot-scope及scope.row用法_vue.js_
- vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案_vue.js_
- vue遮罩层如何阻止滚动_vue.js_
