理解Promise

Promise简单学习 ,备忘react

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 spa

记录下来备忘。code

相关文章
相关标签/搜索