当前位置:首页 > 技术文章 > 正文内容

ES6之async、await基础用法_async是es几

zonemu1个月前 (09-04)技术文章17

1、async/await场景

用同步的思维来解决异步问题的方案,当前端接口调用需要等到接口返回值以后渲染页面时;

2、基本理解

  • async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法;

async function timeout() {

return 'hello world'

}

timeout().then(result => {

console.log(result);

})

console.log('虽然在后面,但是我先执行');

  • 如果async 函数中返回一个值 ,当调用该函数时,内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出错误呢? 那么就会调用Promise.reject() 返回一个promise 对象。

async function timeout(flag) {

if (flag) {

return 'hello world'

} else {

throw 'my god, failure'

}

}

console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。

console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。

函数内部抛出错误, promise 对象有一个catch 方法进行捕获

timeout(false).catch(err => {

console.log(err)

})

  • 注意await 关键字只能放到async 函数里面

async function testResult() {

let result = await doubleAfter2seconds(30);

console.log(result);

}

await 表示等一下,代码就暂停到这里,不再向下执行了,它等什么呢?等后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回,返回值拿到之后,它继续向下执行。

这时你看到了then 的链式写法,有一点回调地域的感觉。

相关文章

宽带客户收费管理系统--维修版(宽带售后服务)

宽带客户收费管理系统--维修版headerfooter《宽带客户收费管理系统——维修版》是一款适合宽带运营商使用的管理系统。软件主要包括以下功能:1.主要功能包括用户开户、收费录入、工单登记、故障处理...

细数5款国外热门Linux发行版(linux发行版排名网站)

Linux系统已经与我们的生活息息相关,当你用Android手机浏览这篇文章时,你就已经在使用Linux系统。当然作为编程开发最热门的系统,他还有很多专注于开发使用的版本。Fedora热门入门推荐,一...

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别...

vue3源码分析——实现组件通信provide,inject

引言<<往期回顾>>vue3源码分析——rollup打包monorepovue3源码分析——实现组件的挂载流程vue3源码分析——实现props,emit,事件处理等vue3源...

如何使用git clone克隆包含子模块的仓库

技术背景在软件开发中,当项目规模逐渐增大时,为了更好地管理代码,我们常常会使用子模块将项目拆分成多个独立的部分。Git 作为目前最流行的版本控制系统,提供了管理子模块的功能。但在克隆包含子模块的仓库时...

(在线编辑DWG)网页CAD二开实现焊接符号绘制

前言在工程制图和制造领域,焊接符号(Welding Symbols)是用于表示焊缝类型、尺寸、位置以及工艺要求的标准化图形语言。广泛应用于机械设计、钢结构、船舶制造、压力容器等行业中,帮助技术人员理解...