promise 使用示范

promise使用实例

1直接return链式操作

// 创建一个promise对象括号里应当存放一个回调函数，此回调函数里有两个参数(自定义1，自定义2)
//自定义1执行代表可以进行下一步操作，自定义2不会进行下一步操作，并且会在最后的catch中被抓取错误信息
//这里自定义1是open  自定义2是err
new Promise(function first(open, err) {
      var num = 1.11;
      if (num > 1) {
        setTimeout(function () {
          console.log(11);
          // 满足条件 open被打开 并且进行下一步
          open()
        }, 1000)
      } else {
    //  如果不满足条件则 调用err 被catch抓取     
        err("失败1")
      }
    })
    //这里是第二级
      .then(function second() {
        return new Promise(function (open, err) {
          setTimeout(() => {
            console.log(22);
            // open依然被打开,open的参数可以为字符串，对象，函数等，打开后这个参数会在下一个then里被调用
            open("这里可以传递方法&数据");
            // 如果调用err 那么catch 会报错 内容是“失败2” err里也可以使用字符串，函数，对象等
            // err("失败2")
          }, 1000);
        })
      })
      //这里是第三级，在then的函数里使用形参（这里使用的是op）
      //可以接住上一个 open()里的参数，并且可以在内容里使用
      .then(function third(op) {
        return new Promise(function (open, err) {
          setTimeout(() => {
            console.log(op + "------------这个是接到的数据");
            console.log(33);
            // open();
         //   这里调用err，catch 报错内容为“失败3”
            err("失败3")
          }, 1000);
        })
      })
      .catch(function (error) {
        console.error(error + "失败也可以传数据");
      })
      // 以上是promise的使用方法 注意必须使用 
      //return new promise(function(自定义1，自定义2){函数主体})
      //的方式把函数包裹起来，但是外层还要嵌套一个函数才可以return new promise 

执行结果

// 先等一秒
 11
 // 再等一秒
 22
 // 再等一秒
 这里可以传递方法&数据------------这个是接到的数据
 33
 失败3失败也可以传数据

2 把已经定义好promise对象的函数做链式链接

// 这里先把有返回 promise的函数定义好
// 第一个 hua
 function hua() {
      return new Promise(function (open, err) {
        console.log("文华起跑...");
        setTimeout(function () {//等待
          if (Math.random() > 0.3) {
            console.log("文华到达终点!");
            //打开下一个接口
            open("传给下一个函数的数据");
          } else err("文华摔倒了!"); //否则失败被catch抓住，内容为 文华摔倒了
        }, 7000);
      })
    }//Promise .then(function)
    // 第二个 yaner
    function yaner(op) {
      return new Promise(function (open, err) {
        console.log("燕儿起跑...");
        setTimeout(function () {//异步等待
          if (Math.random() > 0.4) {
          // 此处打印出：燕儿到达终点!传给下一个函数的数据
            console.log("燕儿到达终点!"+op);
            //继续打开下一个接口
            open();
          } else err("燕儿摔倒了!");
        }, 3000);
      })
    }
    // 第三个 dong
    function dong() {
      console.log("东东起跑...");
      setTimeout(function () {//异步等待
        console.log("东东到达终点!");
      }, 5000);
    }
    // 最后在这里把定义好的函数进行串联调用 
    hua()
      .then(yaner)
      .then(dong)
      .catch(function (errInfo) { console.error(errInfo) });

执行结果

 文华起跑...
 文华到达终点!
 燕儿起跑...
 燕儿到达终点!传给下一个函数的数据
 东东起跑...
 东东到达终点!
  // 由于会有随机数的判断，执行结果不完全一样
  // 如果觉得看不懂可以直接将代码复制下来，自行执行一次，改一改参数再执行，折腾来折腾去就能理解
  // 实例中人名是笔者恩师，若有重名，不甚荣幸！