ES6之async与await
· async - await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性。
· async - await 是建立在Promise机制之上的,并不能取代其地位
基本语法:
async function demo01() {
let result = await Math.random()
console.log(result)
} demo01() // 输出一个随机数
async:
async用来表示函数是异步的,定义的函数会返回一个Promise对象,可以使用then方法添加回调函数
async function demo02() {
return '返回结果'
} demo02().then(res => console.log(res)) // 输出: 返回结果(若 async 定义的函数有返回值,相当于Promise.resolve('返回结果'))
await:await必须出现在 async 函数内部,不能单独使用。
·await后面可以跟任何js表达式。它最主要的意图是用来等待 Promise 对象的状态被 resolved。
·如果await的是 Promise 对象会造成异步函数 停止
执行并且 等待 Promise
的解决,如果等的是正常的表达式则立即执行。
使用方法:
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('enough sleep~')
}, second)
})
} async function dome03() {
await () => {console.log('表达式立即执行')}
let result = await sleep(2000)
console.log(result) //需要等待 sleep 函数执行完成 resolve 才输出(2000毫秒后输出:enough sleep~)
}
实例1(模拟当一个请求需要依赖上一个请求返回的参数时,async与await的使用实例):
// 模拟异步请求
function sleep(second, param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(param);
}, second);
})
} async function test() {
let result1 = await sleep(2000, 'req01')
// 等待第一个 await 执行完成
let result2 = await sleep(1000, 'req02' + result1)
// 等待第二个await 执行完成
let result3 = await sleep(500, 'req03' + result2)
// 等待所有的await执行完成
console.log(`${result3} --- ${result2} --- ${result1}`)
} test() // 等待所有的 await 执行完成输出:req01 --- req02req01 --- req03req02req01
实例2(当需要异步发送多个请求且请求都是独立时的实例):
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request done! ' + Math.random());
}, second);
})
} // 正确写法
async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
// Promise.all('一个可迭代的对象') 将多个 Promise 实例,包装成一个新的 Promise 实例,一次性处理n个Promise对象。
await Promise.all([p1, p2, p3]);
console.log('clear the loading~');
} // 错误写法:以下写法不能实现同步请求,必须等待第一个await接收到sleep的解决才会执行第二个await
async function bugDemo() {
await sleep(1000)
await sleep(1000)
await sleep(1000)
console.log('clear the loading~')
} correctDemo()
bugDemo()
错误处理:
处理错误
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('want to sleep~');
}, second);
})
} async function errorDemoSuper() {
try {
let result = await sleep(1000);
console.log(result);
} catch (err) {
console.log(err); // 当await等待的结果为reject时执行
}
} errorDemoSuper() // 输出:want to sleep~
捕捉错误:
// 定义个抛出异常的方法
function errorTest(second) {
throw new Error('抛出一个异常!!!')
}
方式1:通过 try ... catch捕获
try {
errorTest()
}catch(error){
console.log(error)
}
方式2: 在then回调中捕获
errorTest().then(
resolve => console.log(resolve),
error => console.log(error)
)
方式3:在Promise的catch中捕获
errorTest().catch(
error => console.log(error)
)
想要逃避总有借口,想要成功总有方法!!!
ES6之async与await的更多相关文章
- ES6中async与await的使用方法
promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...
- ES6中async和await说明和用法
昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个 ...
- ES6 async 与 await 实战
下面来说一说通过async和await方式来辅助请求和封装 首先我们定义一个类,定义一个async方法,才可以使用await class JForm extends React.Component { ...
- es6 async与await实战
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...
- es6 async和await
es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器.异步操作需要暂停的地方 ...
- 不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)
在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www. ...
- Promise,Async,await简介
Promise 对象 转载:http://wiki.jikexueyuan.com/project/es6/promise.html 基本用法 ES6 原生提供了 Promise 对象.所谓 Prom ...
- 异步async、await和Future的使用技巧
由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...
- flutter 异步async、await和Future的使用技巧
由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...
随机推荐
- 【LeetCode】835. Image Overlap 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...
- B. The Meeting Place Cannot Be Changed
B. The Meeting Place Cannot Be Changed time limit per test 5 seconds memory limit per test 256 megab ...
- 另一个角度看元宇宙与RPA:人工世界、平行员工与RPA
另一个角度看元宇宙与RPA:人工世界.平行员工与RPA 从元宇宙到平行员工,人工世界推动的虚实分工利好RPA 机器人是铁打营盘人类是流水兵,未来元宇宙的虚实分工RPA机会巨大 文/王吉伟 元宇宙是平行 ...
- 【stm32】基于hal库使用野火指南者esp8266 WIFI模块进行TCP传输
UART.c #include "stm32f1xx_it.h" #include "LED.h" #include "UART.h" #i ...
- 【系统分析】《系统分析与设计方法》 Jeffrey L.Whitten 第1部分 系统开发环境 第3章 信息系统开发
1.解释为什么对企业来说,拥有一个标准的系统开发过程很重要. 开发过程的成熟,使项目时间和费用减少,生产率和质量提高 2.如何关联系统生命周期和系统开发方法学? 系统生命周期包含系统开发阶段,其中使用 ...
- 从0开始手把手带你入门Vue3-全网最全(1.1w字)
天命不足畏,祖宗不足法. --王安石 前言 本文并非标题党,而是实实在在的硬核文章,如果有想要学习Vue3的网友,可以大致的浏览一下本文,总体来说本篇博客涵盖了Vue3中绝大部分内容,包含常用的Com ...
- Fuchsia OS入门官方文档
Fuchsia Pink + Purple == Fuchsia (a new Operating System) Welcome to Fuchsia! This document has ever ...
- 不同目录存在相同名称的py文件,执行时,报错的解决方法
1.问题现象如下,执行时报错 imported module 'test_case_execution' has this __file__ attribute platform win32 -- ...
- Pytest_简介与安装(1)
一.Pytest简介 pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但更灵活.官方网站优点简介: 非常容易上手,入门简单,文档丰富,文档中有很多实例可 ...
- 学习git&github
详细学习视频: 链接:https://pan.baidu.com/s/1Vub3YTo7uUUuGCJUCabBRQ 提取码:6q9x 一.git基本工作流程 我们先来理解下Git 工作区.暂存区和版 ...