• promise-async/await


    Promise最早由社区提出并实现,典型的一些库有Q,when,bluebird等;它们的出现是为了更好地解决JavaScript中异步编程的问题,传统的异步编程最大的特点就是地狱般的回调嵌套,一旦嵌套次数过多,就很容易使我们的代码难以理解和维护。

    promise async

    ES6统一各种开源实现方法,提供原生的构造函数Promise,规范后由浏览器直接支持。

    查看浏览器是否支持:

    type of Promise  // 'function'
    Promise // function Promise(){}

    # promise示例:

     var test = new Promise(function(resolve, reject) {
          var flag = Math.random()*2
          setTimeout(function() {
            if (flag > 1) {
              resolve('ok')
            } else {
              reject('fail')
            }
          }, 2000)
        })
        // 这里的test,写成test() 报错 not a function
        test.then(
          function(res) {
            console.log(res)
          },
          function(err) {
            console.log(err)
          }
        )
        // 两个函数分别对应resolve和reject

    以上代码,一秒后会打印fail/ok,

    构造函数Promise的参数是一个函数,这个函数有两个参数resolve和reject,它们分别是两个函数,这两个函数的作用就是将promise的状态

    从pending(等待)转换为resolved(已解决)

    或者

    从pending(等待)转换为rejected(已失败)

    可以这样理解,

    Promise函数体的内部包裹着一个异步的请求或者操作或者函数;

    然后我们可以在这个异步的操作完成的时候使用resolve函数将我们获得的结果传递出去,或者使用reject函数将错误的消息传递出去。

    # 链式调用

    let p1 = new Promise((resolve, reject) => {
        let flag = Math.random() > 0.5 ? true : false;
        resolve();
    });
    // @2 使用then方法进行链式的调用
    p1.then(() => {
        return 1;
    }).then((result) => {
        console.log(result);
        return 'hello'
    }).then((result) => {
        console.log(result);
    });

    return 出去的参数可以作为下一个then方法的参数直接调用

    # catch

    .then(null, rejection)

    调用then方法时不使用resolve参数,即使用catch捕捉函数异常

    .catch((error) => {console.log(error)})

    # 有一种特殊的语法可以更舒适地与promise协同工作,叫做async/await

  • 相关阅读:
    java中关于AtomicInteger的使用
    什么是程序的原子性
    ReadWriteLock ReentrantReadWriteLock
    InputStream转换为String, byte[] data = new byte[1024]详解
    Invalid argument during startup: unknown conf file parameter : requirepass
    ArrayBlockingQueue 阻塞队列和 Semaphore 信号灯的应用
    java并发之同步辅助类CyclicBarrier和CountDownLatch
    CSS学习摘要-定位
    CSS学习摘要-布局
    CSS学习摘要-浮动与清除浮动
  • 原文地址:https://www.cnblogs.com/laine001/p/10227247.html
Copyright © 2020-2023  润新知