React native 之 async/await
参考资料 :https://www.jianshu.com/p/1e75bd387aa0
要点:
1. async function(){} 将普通函数转换成Promise
2. await 表达式/函数 强制等待后面的结果返回再继续
3. await 只能用在async function(){}中 ,用在普通函数中会报错
async function add1(x){
let a =1;
return x+a;
}
add1(10)
Promise {<resolved>: 11}
async声明add1是一个Promise,执行函数,可以看出
add1(10)的返回值是一个resoved的Promise
function pm(){
return new Promise((resolve,reject)=>{
resolve('1')
})
};
async function test(){
let a = await pm();
let b = await '2';
console.log(a)
console.log(b)
return a+b;
}
test()
1 2
Promise {<resolved>: "12"}
4. 报错处理:最好把await 放入try ... catch ... 中
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {reject('error')}, ms); //reject模拟出错,返回error
});
}
async function asyncPrint(ms) {
try {
console.log('start');
await timeout(ms); //这里返回了错误
console.log('end'); //所以这句代码不会被执行了
} catch(err) {
console.log(err); //这里捕捉到错误error
}
}
asyncPrint(1000);
下面这种方法也可以:
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {reject('error')}, ms); //reject模拟出错,返回error
});
}
async function asyncPrint(ms) {
console.log('start');
await timeout(ms)
console.log('end'); //这句代码不会被执行了
}
asyncPrint(1000).catch(err => {
console.log(err); // 从这里捕捉到错误
});
如果想让
console.log('end');
继续执行,那么可以提前cathc错误
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('error')
}, ms); //reject模拟出错,返回error
});
}
async function asyncPrint(ms) {
console.log('start');
await timeout(ms).catch(err => { // 注意要用catch
console.log(err)
})
console.log('end'); //这句代码会被执行
}
asyncPrint(1000);
应用场景:
当出现多个await 时,如果不存在依赖关系,可以用Promise.all() 并发处理,速度要比一直等待快。
function test1 () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 1000)
})
}
function test2 () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 2000)
})
}
async function exc1 () {
console.log('exc1 start:',Date.now())
let res1 = await test1();
let res2 = await test2(); // 不依赖 res1 的值
console.log('exc1 end:', Date.now())
}
async function exc2 () {
console.log('exc2 start:',Date.now())
let [res1, res2] = await Promise.all([test1(), test2()])
console.log('exc2 end:', Date.now())
}
exc1();
exc2();
React native 之 async/await的更多相关文章
- ES8 async/await语法
Async/await的主要益处是可以避免回调地狱(callback hell)问题 Chromium JavaScript引擎 从v5.5开始支持async/await功能,Chromium Jav ...
- 在react+redux+axios项目中使用async/await
Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...
- React Native知识12-与原生交互
一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- React Native 获取网络数据
getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then(( ...
- React Native填坑之旅--与Native通信之iOS篇
终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...
- Async/Await替代Promise的6个理由
译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...
- React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
- React Native (一) 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.笔者 ...
随机推荐
- A1139-引爆炸弹 计蒜客 bfs剪枝
题目链接 https://nanti.jisuanke.com/t/A1139 在一个 n \times mn×m 的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上 ...
- 20191128 Spring Boot官方文档学习(10)
10.附录 附录A:通用应用程序属性 附录B:配置元数据 附录C:自动配置类 附录D:测试的自动配置注释 附录E:可执行的Jar格式 附录F:依赖版本
- Excel透视表进阶之排序、筛选、分组、总计与分类汇总
排序 自动排序 升序: 数字(从小到大) 日期(日期越早越靠小) 英文(按照A-Z) 中文(按照拼音的A-Z) 手动排序 通过鼠标的拖拽来完成手动排序 通过快捷菜单的方式:右击-移动 依据其他字段进行 ...
- UVA 1642 MagicalGCD 题解
题面 本题是一道区间最大公约数的模板题: 如果N^2暴力的话当然会超时,所以我们要发掘出区间gcd的特点: 设gcd[i]表示区间[1,i]的最大公约数: 我们可以发现,从一个点i到1之间的所有区间的 ...
- eclipse project--->clean作用
eclipse project-->clean ,clean主要是class文件删除,并同时编译新的工程,生成新的class文件. 如果修改代码后,在运行时,还是旧代码,可能class文件还是 ...
- 细说vue axios登录请求拦截器
当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...
- 3种Redis分布式锁的对比
我们通常使用的synchronized或者Lock都是线程锁,对同一个JVM进程内的多个线程有效.因为锁的本质 是内存中存放一个标记,记录获取锁的线程是谁,这个标记对每个线程都可见.然而我们启动的多个 ...
- centos 6.x 编译安装 pgsql 9.6
文章结构如下: 一. 环境配置 1. 配置防火墙 查看IPTABLES 当前状态与关闭过程 chkconfig --list|grep iptables 关闭iptables service ipta ...
- MySQL 主从同步架构中你不知道的“坑”
以下操作征对指定不同步库 binlog-format=ROW模式 1 查看主从的binlog模式 mysql> show slave status\G ********************* ...
- 定义一个外部类Father,有成员变量name并赋一个初值。
1.内部类的使用:(1)定义一个外部类Father,有成员变量name并赋一个初值.(2)定义一个内部类Child,并定义一个getValue()方法,在方法中调用外部类Father的name变量.( ...