理解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
})

new Promise能将一个异步过程转化成promise对象。先有了promise对象，然后才有promise编程方式。
.then用于为promise对象的状态注册回调函数。它会返回一个promise对象，所以可以进行链式调用，也就是.then后面可以继续.then。在注册的状态回调函数中，可以通过return语句改变.then返回的promise对象的状态，以及向后面.then注册的状态回调传递数据；也可以不使用return语句，那样默认就是将返回的promise对象resolve。
.catch用于注册rejected状态的回调函数，同时该回调也是程序出错的回调，即如果前面的程序运行过程中出错，也会进入执行该回调函数。同.then一样，也会返回新的promise对象。
调用Promise.resolve会返回一个状态为fulfilled状态的promise对象，参数会作为数据传递给后面的状态回调函数
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

猜你喜欢