js中的async await
JavaScript 中的 async/await 是属于比较新的知识,在ES7中被提案在列,然而我们强大的babel粑粑已经对它进行列支持!
如果开发中使用了babel转码,那么就放心大胆的用吧。
在vue中使用的例子请到最下面
1. 何为 async
作为新时代的玩意儿,如果对promise不了解,需要先补习一下 Promise 相关的知识。
async 顾名思义,就是异步的意思, 看上去是一个异步标识,就是告诉我们这个函数中有异步执行的代码。
像这样 标识:
async function getData() { // ...... }
这就是说getData函数里面有异步的东西,那么异步的东西是什么呢? 其实就是个Promise,
就算你不写, 直接return 个任何, 它都会封装一下,让你return的东西出现在一个Promise的resolve() ,就是这么刚!
例子: 这里 getData_1 和 getData_2 当你使用await 执行他们时, 结果是一样的,得到的也是一样的, 都返回一个 Promise对象, 而 getData_1 则是async封装的Promise对象并将 '100' 放到resolve() 的参数中:resolve('100')。
function getData_1 () {
return '100'
} function getData_2 () {
return new Promise((resolve, reject) => {
resolve('100')
})
}
2. 何为 await
await 就是等待 async执行完,才会执行后面的东西, 等待的东西是异步的,它就会阻塞当前代码, 阻塞??!!
别担心, 它只能在async函数里使用, 虽然阻塞,但是是异步的。
来个例子:
async function getData_1 () {
return '100'
} function getData_2 () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('200')
}, 2000)
})
} async function run () { const data_1 = await getData_1();
console.log(data_1); const data_2 = await getData_2();
console.log(data_2);
} run ();
getData_1 前面即使不声明async,使用await也是可以的, 因为await 啥都能等!
1.如果等到的是promise, 它就把promise的resolve的参数返回,
2.如果等到的是普通东西,就直接返回这个东西。
就像上面的data_1 , 就算 getData_1 没有async 它的结果也一样的。 在run函数中, data_1 后的代码需要getData_1 执行完毕才会执行,
data_1 得出以后, data_2其实会2秒之后才会得出, 但是此时,它会等2秒,
直到data_2得出以后,才会执行后面的console
在vue中的例子:
export default { mounted () {
this.run();
console.log('step2')
},
methods: {
queryData_1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('queryData_1')
}, 2000)
})
},
queryData_2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('queryData_2')
}, 2000)
})
},
queryData_3() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('queryData_3')
}, 2000)
})
},
async run () {
const data_1 = await this.queryData_1();
console.log(data_1) // 2秒后打印 data_1
const data_2 = await this.queryData_2();
console.log(data_2) // 4秒后打印 data_2
const data_3 = await this.queryData_3();
console.log(data_3) // 6秒后打印 data_3
}
}
}
js中的async await的更多相关文章
- JS中的async/await的执行顺序详解
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉 ...
- js循环中使用async/await踩过的坑
最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...
- 【TypeScript】如何在TypeScript中使用async/await,让你的代码更像C#。
[TypeScript]如何在TypeScript中使用async/await,让你的代码更像C#. async/await 提到这个东西,大家应该都很熟悉.最出名的可能就是C#中的,但也有其它语言也 ...
- [C#] .NET4.0中使用4.5中的 async/await 功能实现异
好东西需要分享 原文出自:http://www.itnose.net/detail/6091186.html 在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framew ...
- 在Silverlight中使用async/await
现在 async/await 大行其道,确实,有了 async/await ,异步编程真是简单多了,个人觉得 async/await 的出现,给开发者还来的方便,绝不亚于当年 linq 的出现. 但要 ...
- 在现有代码中通过async/await实现并行
在现有代码中通过async/await实现并行 一项新技术或者一个新特性,只有你用它解决实际问题后,才能真正体会到它的魅力,真正理解它.也期待大家能够多分享解一些解决实际问题的内容. 在我们遭遇“黑色 ...
- [C#] .NET4.0中使用4.5中的 async/await 功能实现异步
在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去 ...
- 理解ES7中的async/await
理解ES7中的async/await 优势是:就是解决多层异步回调的嵌套 从字面上理解 async/await, async是 "异步"的含义,await可以认为是 async w ...
- .NET4.0中使用4.5中的 async/await 功能实现异步
在.NET Framework 4.5中添加了新的异步操作库,但是在.NET Framework 4.0中却无法使用.这时不免面临着抉择,到底是升级整个解决方案还是不使用呢? 如果你的软件还没发布出去 ...
随机推荐
- Android SurfaceView概述
简介:SurfaceView继承自View,但它与View不同,View是在UI主线程中更新画面,而SurfaceView是在一个新线程中更新画面,View的特性决定了其不适合做动画,因为如果更新画面 ...
- 20155223 实验5 MSF基础应用
20155223 实验5 MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode? exploit:漏洞攻击.一个exploit程序肯定会触发系统的一个或多个漏 ...
- 2017-2018-2 20155234『网络对抗技术』Exp5:MSF基础应用
攻击MS08-067安全漏洞--WindowsXP 在kali输入msfconsole进入控制台,依次输入指令 第一次很遗憾失败了 发现是防火墙没关重新来过成功 攻击MS11-050安全漏洞--IE7 ...
- 20155330 《网络攻防》 Exp4 恶意代码分析
20155330 <网络攻防> Exp4 恶意代码分析 实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操 ...
- 实验的方差分析(R语言)
实验设计与数据处理(大数据分析B中也用到F分布,故总结一下,加深印象)第3课小结--实验的方差分析(one-way analysis of variance) 概述 实验结果\(S\)受多个因素\(A ...
- EZ 2018 02 28 NOIP2018 模拟赛(二)
我TM的终于改完了(其实都是SB题) 题目链接:http://211.140.156.254:2333/contest/53 T1送分,T2前40%送分,还有骗分机制在里面,T3暴力50 所以200应 ...
- STM32-M0中断优先级介绍
先解释中断优先级,后面讲代码的实现. 差异:M0的中断优先级相比于M4,没有用到分组,且只用到了2个bit位(即0~3)来设置,数值越小,优先级越高:同等优先级,根据终端号的大小来决定谁先执行. 根据 ...
- 使用Python实时获取cmd的输出
最近发现一个问题,一个小伙儿写的console程序不够健壮,监听SOCKET的时候容易崩,造成程序的整体奔溃,无奈他没有找到问题的解决办法,一直解决不了,可是这又是一个监控程序,还是比较要紧的,又必须 ...
- Stm32l151+mpu6050+uart读取数据调试
新近买了一个MPU6050模块,如上图,这个模块上的三块黑色分别是:稳压芯片662K,STM8s003f3p6,MPU6050. 根据此模块的说明书,可以使用USB转TTL将模块与上位机连接,通过卖家 ...
- PHP学习笔记2
PHP Switch语句 用于根据多个不同条件执行不同动作.如果不在每个条件后加break,将会输出所有结果. <?php $language="java"; switch( ...