zoukankan      html  css  js  c++  java
  • 理解Promise

    Promise简单学习 ,备忘

    Promise用同步的写法解决了异步回调金字塔的问题

    getData1(data1 => {
      getData2(data1, data2 => {
        getData3(data2, data3 => {
          getData4(data3, data4 => {
            getData5(data4, data5 => {
              // 终于取到data5了
            })
          })
        })
      })
    })

    用Promise

    getData1()
    .then(getData2)
    .then(getData3)
    .then(getData4)
    .then(getData5)
    .then(data => {
      // 取到最终data了
    })

    基础用法

    let p = new Promise((resolve, reject) => {
      // 做一些事情
      // 然后在某些条件下resolve,或者reject
      if (/* 条件随便写^_^ */) {
        resolve()
      } else {
        reject()
      }
    })
    
    p.then(() => {
        // 如果p的状态被resolve了,就进入这里
    }, () => {
        // 如果p的状态被reject
    })
    1. new Promise能将一个异步过程转化成promise对象。先有了promise对象,然后才有promise编程方式。
    2. .then用于为promise对象的状态注册回调函数。它会返回一个promise对象,所以可以进行链式调用,也就是.then后面可以继续.then。在注册的状态回调函数中,可以通过return语句改变.then返回的promise对象的状态,以及向后面.then注册的状态回调传递数据;也可以不使用return语句,那样默认就是将返回的promise对象resolve。
    3. .catch用于注册rejected状态的回调函数,同时该回调也是程序出错的回调,即如果前面的程序运行过程中出错,也会进入执行该回调函数。同.then一样,也会返回新的promise对象。
    4. 调用Promise.resolve会返回一个状态为fulfilled状态的promise对象,参数会作为数据传递给后面的状态回调函数
    5. Promise.reject与Promise.resolve同理,区别在于返回的promise对象状态为rejected

    模拟红绿灯

    componentDidMount(){
            function red(){
                console.log("red");
            }
            function yellow(){
                console.log("yellow");
            }
            function green(){
                console.log("green");
            }
            
            let light = (fn,timer) => new Promise(resolve=>{
                setTimeout(function(){
                    fn();
                    resolve();
                },timer)
            })
            function start(){
                Promise.resolve().then(()=>{
                    light(red,3000)
                }).then(()=>{
                    light(yellow,5000)
                }).then(()=>{
                    light(green,8000)
                })
            }
            start();
            
            
    
        }

    我写在react项目里test 

    记录下来备忘。

  • 相关阅读:
    HDU4513 吉哥系列故事——完美队形II Manacher算法
    POJ3974 Palindrome Manacher算法
    POJ1674 Sorting by Swapping 置换群
    100个著名初等数学问题[转载]
    POJ1026 Cipher 置换群
    FOJ1977 Pandora adventure 插头DP
    HDU1964 Pipes 插头DP
    POJ1286 Necklace of Beads polya计数
    Manacher算法O(n)回文子串算法[转载]
    POJ3270 Cow Sorting 置换群
  • 原文地址:https://www.cnblogs.com/junwu/p/11127571.html
Copyright © 2011-2022 走看看