• Promise对象


    传统实现异步操作就是采用回调函数,回调函数方式本身没有什么问题,但是在多重回调函数层层嵌套的情况下,那么代码的可阅读性就会出现问题。

    Promise对象 是一个新的异步操作解决方案,比原有的回调函数等方式更为合理

    Promise对象 具有三种状态:Pending(等待)、Resolved(已完成) 和 Rejected(未完成)

    Promise对象状态的改变只有两种可能: Pending转变为Resolved或者Pending转变为Rejected

    step1().then(step2).then(step3).then(step4).catch(function(err){
      // do somethingn when err
    })
    
    let param; //传递参数载体
    
    function p1() {
      return new Promise(function(resolve,reject){
        setTimeout(function() {
          console.log("aaaaaa");
          // resolve(123);
          param = "第1";
          reject(123)
        },3000);
      });
    }
    
    function p2() {
      return new Promise(function(resolve,reject){
        setTimeout(function(){
          console.log("bbbbbb");
          param = "第2";
          resolve(456); // 继续向下
          // reject(456); // 截停
        },2000);
      });
    }
    
    function p3() {
      return new Promise(function(resolve,reject){
        setTimeout(function () {
          console.log("cccccc");
          console.log('传来:' + param);
          param = '第3';
          resolve(789);
        },1000);
      });
    }
    
    function p4() {
      return new Promise(function(resolve,reject) {
        setTimeout(function () {
          console.log("dddddd");
          console.log('传来:' + param);
          resolve("结束");
        },1000);
      });
    }
    
    p1().then(p2).then(p3)
    .then(function(data){
      console.log("data: " + data);
    })
    .catch(function(error){
      console.log('end,error:' + error);
      if(error == 123){  // 如果第1步出错
        p3().then(p4);
      }else if(error == 456) {
        p4();
      }
    });

    实例:

    function studyEs6() {
      let param; // 定义一个变量,用于步骤之间传值
      // 定义4个步骤
      function p1() {
        return new Promise(function(resolve,reject) { // resolve完成状态(成功) reject未完成状态(失败)
          setTimeout(function() {
            console.log("aaaaaa");
            param = '我是123';
            // resolve(123); // 必须加上resolve, p2才会执行,resolve中可以传值,也可以不传值
            reject(123);
          },3000)
        })
      }
      function p2() {
        return new Promise(function(resolve,reject) {
          setTimeout(function() {
            console.log("bbbbbb");
            resolve(456);
          },2000)
        })
      }
      function p3() {
        return new Promise(function(resolve,reject) {
          setTimeout(function() {
            console.log("cccccc");
            console.log('收到:' + param); // 获取p1传来的值 -- 我是123
            param = '我是789'; // 重新赋值
            resolve(789);
          },1000)
        })
      }
      function p4() {
        return new Promise(function(resolve,reject) { // 最后一步可以不写resolve和reject
          setTimeout(function() {
            console.log("dddddd");
            console.log('我收到:' + param); // 获取p3传来的值 -- 我是789
          },500)
        })
      }
      p1().then(p2).then(p3).then(function(data){  // .then(function(data))中接收到的值是最后一个函数传的值,此处为 p3
        console.log('收到参数:' + data); // 789
      }).catch(function(err){ // 捕获reject状态下情况,err为reject()传递的值
        console.log('出错:' + err);
        if(err == 123){ // 判断如果p1出错,则从p3开始向下执行
          p3().then(p4);
        }
      });
    }
    

      

  • 相关阅读:
    46. 全排列
    90. 子集 II
    289. 生命游戏
    844. 比较含退格的字符串
    1266. 访问所有点的最小时间
    707. 设计链表
    DOM 关于dom的
    插件库
    浏览器判断
    FTP 客户端安装
  • 原文地址:https://www.cnblogs.com/crazycode2/p/6681895.html
Copyright © 2020-2023  润新知