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的使用经验,不对之处烦请指出.笔者 ...
随机推荐
- Unity3D 旋转
Unity有两种设置物体旋转的方式,一种时用Rotate()函数来旋转,另一种时直接构造目标Quaternion来直接赋予rotation. 好吧,不知到写什么,各种旋转和unity2D差不多.在国内 ...
- c/c++ 链表实现
//链表的基本用法代码实现/************************************************************************/ /* Created: ...
- xc语言l博客作业03
问题 答案 这个作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/8719 我在 ...
- Redis配置主从时报错“Could not connect to Redis at 192.168.0.50:6379: Connection refused not connected>”
配置Redis主从时,修改完从节点配置文件,然后报错 [root@Rich七哥-0-50 redis]# /opt/redis/redis-cli -h 192.168.0.50 Could not ...
- [转帖]SUN/Oracle JDK还是OpenJDK?
你安装的是 https://www.cnblogs.com/shoufeng/p/9719995.html 目录 1 如何查看你安装的JDK版本 1.1 要用到的命令行工具 1.2 查看JDK的版本 ...
- Scala学习笔记(3)
数组 ----------------------------------- 0.若长度固定则用Array,若长度可能变化则使用ArrayBuffer 1.提供初始值的时候不要使用new. 2.用() ...
- Python基础——函数进阶
等待更新…………………… 后面再写
- pycharm解释器链接如何pymongo
1.pymongo 链接数据库 # pycharm 链接我们的mogodb # 下载pymongo from pymongo import MongoClient # 客户端请求 服务端 # 链接 c ...
- laravel中间件失效,配置文件重新加载
composer dump-autoload php artisan cache:clear 清理视图缓存 php atisan view:clear 清除运行缓存 php artisan cache ...
- 【转】rsa公钥和私钥的生成
转:https://www.cnblogs.com/zengsf/p/10136886.html 在liunx环境中 openssl 然后生成私钥: genrsa -out app_private_k ...