ES7之async/await
async 是 ES7 才有的与异步操作有关的关键字。
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。
async function helloAsync(){
return "helloAsync";
} console.log(helloAsync()) // Promise {<resolved>: "helloAsync"} helloAsync().then(v=>{
console.log(v); // helloAsync
})
async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。
function testAwait(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("testAwait");
resolve();
}, 1000);
});
} async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
使用async和await配合,可以不使用then实现函数的同步执行。
await返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。
function testAwait (x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
} async function helloAsync() {
var x = await testAwait ("hello world");
console.log(x);
}
helloAsync ();
// hello world
正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数。
function testAwait(){
console.log("testAwait");
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
await针对所跟不同表达式的处理方式:
Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
非 Promise 对象:直接返回对应的值。
在React Native项目中的使用示例:
async login(){
this.setState({
loading:true
})
let { username, pwd } = this.state
// console.log(username,pwd)
AsyncStorage.setItem('username', username)
AsyncStorage.setItem('pwd', pwd) let that = this // 发起网络请求
await fetch(base +'/appLogin/login',{
method: 'POST',
body:JSON.stringify({
name: username,
pwd: md5(pwd),
}),
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
}).then(response => response.json()).then((data) => {
this.setState({
loading:false
})
console.log("res",data)
if(data.code === 200){
let mydata = data.data
//操作mydata
}).catch((err)=>{
console.log(err)
})
}
该程序片段使用fetch来请求接口,等到拿到数据后先使用
fetch().then(response => response.json()).then((data) => {})
进行解析,得到数据。
ES7之async/await的更多相关文章
- ES7的Async/Await的简单理解
Async/Await 的个人见解 正文: async,顾名思义,一个异步执行的功能,而 await 则是配合 async 使用的另一个关键字,也是闻字识其意,就是叫你等待啦! 二者配合食用效果更佳哦 ...
- ES7 之 Async/await 的使用
在 js 异步请求数据时,通常,我们多采用回调函数的方式解决,但是,如果有多个回调函数嵌套时,代码显得很不优雅,维护成本也相应较高. ES6 提供的 Promise 方法和 ES7 提供的 Async ...
- 体验异步的终极解决方案-ES7的Async/Await
阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解.本文以体验为主,不会深入说明,结尾有详细的文章引用. 第一个例子 Async/Await应该是目前最简单的异步方案 ...
- ES7的async/await
async 表示这是一个async函数,await只能用在这个函数里面. await 表示在这里等待promise返回结果了,再继续执行. await 后面跟着的应该是一个promise对象 awai ...
- 让webpack打包支持ES7的async/await语法
npm install --save-dev babel-plugin-transform-runtime npm install --save babel-runtime .babelrc配置 { ...
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
- NodeJs通过async/await处理异步
##场景 远古时代 我们在编写express后台,经常要有许多异步IO的处理.在远古时代,我们都是用chunk函数处理,也就是我们最熟悉的那种默认第一个参数是error的函数.我们来模拟一个Mongo ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- promise 进阶 —— async / await 结合 bluebird
一.背景 1.Node.js 异步控制 在之前写的 callback vs async.js vs promise vs async / await 里,我介绍了 ES6 的 promise 和 ES ...
随机推荐
- Java并发——volatile的原理
111 Java并发——volatile的原理
- Thymeleaf(一)---引入js/css文件
th:href="@{/static/css/style.css}" th:src="@{/static/js/thymeleaf.js}" index.htm ...
- manjaro更换深度桌面 卸载ked桌面
下载需要的桌面环境 pacman -S deepin deepin-extra 修改/etc/lightdm/lightdm.conf sudo nano /etc/lightdm/lightdm.c ...
- yolov3测试自己的数据
yolov3测试自己的数据 前言 上一篇我已经介绍了利用yolov3预训练权重文件(只包含卷积层)并训练 只需要进行如下编译: ./darknet detector train cfg/voc.dat ...
- js封装、继承
封装:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html 继承:http://ww ...
- spring boot 接口service有多个实现类
接口.java public interface DeService { } 接口实现类1.java @Service("ud")public class DeServiceImp ...
- DevOps - 实施原则
章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...
- CodeForces - 862B Mahmoud and Ehab and the bipartiteness(二分图染色)
题意:给定一个n个点的树,该树同时也是一个二分图,问最多能添加多少条边,使添加后的图也是一个二分图. 分析: 1.通过二分图染色,将树中所有节点分成两个集合,大小分别为cnt1和cnt2. 2.两个集 ...
- Biu一Biu--GDB
gcc常见编译选项 ** -c **:只激活预处理.编译和汇编,也就是生成obj文件 ** -S **:只激活处理和编译,把文件编译成汇编代码 ** -o **:定制目标名称,缺省的时候编译出来的可执 ...
- 杭电oj3306:Another kind of Fibonacci(矩阵快速幂)
Another kind of Fibonacci 题目链接 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (J ...