es6 async await 使用

概述

说一下 async , await 函数的简单应用，用最简单的示例，让复杂的事变得更简单。

记住以下知识，项目中基本够用

示例

以下示例，大家可以直接复制粘贴到浏览器的console面板测试，方便大家理解。

示例1 - 最简单的async 函数

// async 关键词，创建的函数就是异步函数
async function asyncFn () {console.log('2')return  4;
}console.log('1');asyncFn().then((data)=> {console.log('这就是异步函数返回的结果')console.log(data);})console.log('3');

输出结果

1
2
3
这就是异步函数返回的结果
4

示例2 - await 函数

function test(){return new Promise((resolve) => {setTimeout(() => {    console.log('异步函数test:2'); resolve(2)}, 100)})
}
console.log(1)
console.log('100ms后')
console.log('\n')await test()
console.log(3)

输出结果

1
100ms后异步函数test:2
3

tips：

chrome 98.0.4758.82（正式版本）（64 位） : await 可以脱离 async单独使用，并且生效
operate 83.0.4254.27 ： await 可以脱离 async单独使用，并且生效
edge 版本 98.0.1108.56 (官方内部版本) (64 位): await 可以脱离 async单独使用，并且生效
搜狗 11.0.1.34551： await 可以脱离 async单独使用，并且生效
360极速13.0.2290.0： await 可以脱离 async单独使用，并且生效
safari 5.1.7 (7534.57.2): 不支持直接写 async 语法
火狐45.9.0：不支持直接写 async 语法
ie11: 不支持直接写 async 语法

总体来说，只要支持 async, await 语法的浏览器，上述代码都可直接使用，所以await 可单独使用，但是不建议这么干，还是跟async 配合比较好

示例3 async + await 同步代码

注意2和4的位置

// async 关键词，创建的函数就是异步函数
async function asyncFn () {console.log('2')const a = await 5;console.log('4')return  a;
}console.log('1');asyncFn().then((data)=> {console.log('这就是异步函数返回的结果')console.log(data);})console.log('3');

输出结果

1
2
3
4
这就是异步函数返回的结果
5

注意上面的代码， 2和4中间增加了一个 await ，起到的作用就是 4在3后面输出，

tips: 一般 await后面是跟异步函数，但是也可以直接跟同步代码, 但是await 仍然是异步效果

示例4 async + await promise

// async 关键词，创建的函数就是异步函数
async function asyncFn () {console.log('2')const a = await new Promise((resolve) => {  setTimeout(() => {resolve(5)}, 100)});console.log('4')return  a;
}console.log('1');asyncFn().then((data)=> {console.log('这就是异步函数返回的结果')console.log(data);})console.log('3');

输出结果

1
2
34
这就是异步函数返回的结果
5

结果和示例2一样，值得注意的是，这里有100ms的延迟，才会输入4，5

示例5 async + 多个 await promise

// async 关键词，创建的函数就是异步函数
async function asyncFn () {console.log('2')const a = await new Promise((resolve) => {  setTimeout(() => {    console.log('异步函数a:4'); resolve(4)}, 100)});console.log('同步代码：5') console.log('\n') const b = await new Promise((resolve) => {  setTimeout(() => {console.log('异步函数b:6') ;resolve(6)}, 100)});console.log('同步代码：7')console.log('\n') return  a + '--'+ b;
}console.log('1');asyncFn().then((data)=> {console.log('这就是异步函数返回的结果')console.log(data);})console.log('3');

输出结果

1
2
3异步函数a:4
同步代码：5异步函数b:6
同步代码：7这就是异步函数返回的结果
4--6

tips: 有await的地方，后面的代码一定会等await完事，才会往下执行

示例6 async + 多个 await promise, 异常发生报错

// async 关键词，创建的函数就是异步函数
async function asyncFn () {console.log('2')if ( Math.random()> 0.5){throw new Error('【同步代码出错】')}const a = await new Promise((resolve,reject) => {  setTimeout(() => {    console.log('异步函数a:4'); Math.random() > 0.5 ?resolve(4): reject(new Error('异步函数a出错'))}, 100)});console.log('同步代码：5')console.log('\n')const b = await new Promise((resolve,reject) => {  setTimeout(() => {console.log('异步函数b:6') ;Math.random() > 0.5 ?resolve(6): reject(new Error('异步函数b出错'))}, 100)});console.log('同步代码：7')console.log('\n')return  a + '--'+ b;
}
console.log('1');
asyncFn().then((data)=> {console.log('这就是异步函数返回的结果')console.log(data);
}, (errorData)=> {console.log('异步函数失败返回的结果');console.log(errorData);
})
console.log('3');

输出结果

同步异步都没有出错，会输出以下结果

1
2
3异步函数a:4
同步代码：5异步函数b:6
同步代码：7这就是异步函数返回的结果
4--6

1、同步出错，会输出以下结果

1
2
3异步函数失败返回的结果
Error: 【同步代码出错】at asyncFn (<anonymous>:5:11)at <anonymous>:16:1

2、异步函数a出错，会输出以下结果

1
2
3异步函数a:4异步函数失败返回的结果
Error: 异步函数a出错at <anonymous>:7:140

3、异步函数b出错，会输出以下结果

1
2
3异步函数a:4
同步代码：5异步函数b:6异步函数失败返回的结果
Error: 异步函数b出错at <anonymous>:10:136

tips: 只要async内部有一个报错，包含同步代码出错和 await中的promise reject, 执行的代码报错， async都会终止

总结

无论异步函数写什么， async 函数返回都promise
在支持async, await语法的浏览器上，await 可以单独使用，但建议不要单独使用await 需要配合async 函数
有await的地方，后面的代码一定会等await完事，才会往下执行
只要async内部有一个报错，包含同步代码出错和 await中的promise reject, 执行的代码报错， async都会终止

es6 async await 使用相关推荐

es6 --- promise和async/await的区别
首先需要了解async函数: async是Generator函数的语法糖: // 使用Generator依次读取两个文件 var fs = require('fs'); var readFile = ...
精读《async/await 是把双刃剑》存在的问题和解决方法
原文链接: 精读<async/await 是把双刃剑> 存在的问题和解决方法上一篇: es6 async/await 定时函数下一篇: 精读<async/await 是把双刃剑& ...
ES6箭头函数以及promise/async/await测试案例
ES6箭头函数的运用下面以一段代码解释 function one(){return 1 以上函数用箭头函数写步骤,参考下面代码 {}和里面的东西先删去 one = (里面写参数/无参数的里面为空)= ...
让IE9及以上兼容es6，Promise, 及es7的async await
在完成下面A和B两步后,页面内嵌JS或者引入自己外部JS,script标签的type属性需要设置为text/babel <!DOCTYPE html> <html><he ...
8张图让你一步步看清 async/await 和 promise 的执行顺序
2019独角兽企业重金招聘Python工程师标准>>> **摘要:**面试必问原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序作者:ziwei3 ...
理解 async/await 的执行
这是一篇简单的短文章,方便理解. 开局先丢官宣:sec-async-function-definitions 这个链接是对 await 的解释,解释了它的执行. await 的执行意味着(官宣巴拉巴拉 ...
async/await工作机制探究--NodeJS
ES6中的async/await让Promise变得更加简便,通常await处理的链式Promise会包裹在函数中,返回结果仍然是一个Promise对象. 但是当await直接处理链式Promise时 ...
使用async await 封装 axios
es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以 ...
js callback promise async await 几种异步函数处理方式
***callback 这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作, ...

es6 async await 使用

概述

示例

示例1 - 最简单的async 函数

示例2 - await 函数

示例3 async + await 同步代码

示例4 async + await promise

示例5 async + 多个 await promise

示例6 async + 多个 await promise, 异常发生报错

总结

es6 async await 使用相关推荐

最新文章

热门文章