参考资料 :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的更多相关文章

  1. ES8 async/await语法

    Async/await的主要益处是可以避免回调地狱(callback hell)问题 Chromium JavaScript引擎 从v5.5开始支持async/await功能,Chromium Jav ...

  2. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  3. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

  4. react native 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...

  5. React Native 获取网络数据

    getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then(( ...

  6. React Native填坑之旅--与Native通信之iOS篇

    终于开始新一篇的填坑之旅了.RN厉害的一个地方就是RN可以和Native组件通信.这个Native组件包括native的库和自定义视图,我们今天主要设计的内容是native库方面的只是.自定义视图的使 ...

  7. Async/Await替代Promise的6个理由

    译者按: Node.js的异步编程方式有效提高了应用性能:然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码:在实践过程中,却发现Promise并不完美:技术进步是无止 ...

  8. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

  9. React Native (一) 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.笔者 ...

随机推荐

  1. 【HANA系列】SAP Vora(SAP HANA和Hadoop)简析

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP Vora(SAP HAN ...

  2. 灰度图像的自动阈值分割(Otsu 法)

    关于otsu分割方法,这个文章讲的是最好的,清晰易懂,一看就是作者认真思考过的. 因为在看这个算法的时候我就想,如果一个很大的图像上,大部分像素值都在0 - 50范围内,但是有很小一块像素值在240的 ...

  3. 引用dll出现了黄色感叹号

    今天引用一个dll的时候出现了一个小感叹号,重新生成也无济于事,如下图 原因是,被引用的项目使用的是.NET2.0版本,而当前项目使用的是.NET3.5版本,所以出现了错误 解决办法把当前项目和引用项 ...

  4. Java学习开发第三阶段总结

    第三阶段的学习总结: 在这次学习我学习了面向对象和封装的知识. ①类的定义 package day01; public class student { //成员变量 String name; //姓名 ...

  5. 2019JAVA第四次实验报告

    JAVA实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/29 评分等级 实验四 类的继承 1.实验目的 掌握类的继承方法: 变量的继承和覆盖,方法的继承.重载和 ...

  6. 3、APK file does not exist on disk

    参考:https://blog.csdn.net/ouyang_peng/article/details/51243441 亲测可以解决

  7. 洛谷 P3834 卢卡斯定理 题解

    题面 首先你需要知道这条定理: C(n,m)=C(n%p,m%p)*C(n/p,m/p); 这样可以递归实现: 注意坑点:是C(n+m,m),并不是C(n,m); #include <bits/ ...

  8. 开源消息服务中间件ActiveMQ安装部署

    1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/ 2.运行ActiveMQ 解压缩apache-activemq-5.5.1-bin.zip 启动Act ...

  9. Gym 101466(完整)

    题目链接 :点击此处 ## Problem A 题意: 给你n个数,重定义两个数之间的加法不进位,求这些数中两个数相加的最大值和最小值. 题解: 字典树.我们首先将前i-1为放入字典树中,然后在查询第 ...

  10. java中<<,>>和>>>的含义

    <<,>>,>>>为java中的移位运算符. <<表示左移运算符 例如8<<2,表示将8向左移2位,结果为32.低位补0. 二进制演算 ...