zoukankan      html  css  js  c++  java
  • 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();


     
    此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935. 我的gitHub: (学习代码都在gitHub) https://github.com/nwgdegitHub/
  • 相关阅读:
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    jQuery火箭图标返回顶部代码
    仿京东左侧菜单
    京东首页右侧固定层
    jQuery中的事件与动画
    javaScript(四)
  • 原文地址:https://www.cnblogs.com/liuw-flexi/p/11904000.html
Copyright © 2011-2022 走看看