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 

    记录下来备忘。

  • 相关阅读:
    ajax--->简单加法小练习
    Django----->Ajax
    Django----->inclusion_tag的使用
    分页插件
    权限--中间件
    Django----->一周后的重温
    Django---->视图(View)
    【转载】chmod命令详解
    【转载】linux ls -l命令详解
    js自定制周期函数
  • 原文地址:https://www.cnblogs.com/junwu/p/11127571.html
Copyright © 2011-2022 走看看