首页 ›  文章

Promise 使用心得

2019-12-03

一般用法

var promise = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});

或者

function createPromise(){
  return new Promise(function (resolve, reject) {
     resolve(request.responseText);
    });
}

链式操作

创建首个 Promise

var p = new Promise(function (resolve, reject) {
    log('start new Promise...');
    resolve(123);
});
p.then().then()....

或者

var p=Promise.resolve('13');
或者
var p=Promise.resolve('13');
p.then().then()

then 链

then 函数是可以有两个参数函数的,fulfilled rejected,一般只写一个函数 fulfilled;

  • 如果两个参数函数,都是同步函数,则 then 函数按照顺序执行;如果上一个 then 函数执行的结果,不返回 promise,则默认执行 fulfilled 函数;

    var promise = Promise.reject("1");
    
    promise
      .then(
        config => {
          console.log("2");
        },
        err => {
          console.log("3");
        }
      )
      .then(
        config => {
          console.log("4");
        },
        err => {
          console.log("5");
        }
      )
      .then(
        config => {
          console.log("6");
        },
        err => {
          console.log("7");
        }
      );

    输出:

    3
    4
    6

[========]

var promise = Promise.resolve("1");

promise
  .then(
    config => {
      console.log("2");
    },
    err => {
      console.log("3");
    }
  )
  .then(
    config => {
      console.log("4");
    },
    err => {
      console.log("5");
    }
  )
  .then(
    config => {
      console.log("6");
    },
    err => {
      console.log("7");
    }
  );

输出:

2
4
6

[========]

var promise = Promise.reject("1");

promise
  .then(
    config => {
      console.log("2");
    },
    err => {
      console.log("3");
    }
  )
  .then(() => Promise.reject("0"))
  .then(
    config => {
      console.log("6");
    },
    err => {
      console.log("7");
    }
  )
  .then(
    config => {
      console.log("8");
    },
    err => {
      console.log("9");
    }
  );

输出

3
7
8
  • 如果两个参数函数,含有异步函数(setTimeout 等),则 then 函数按照顺序触发;
var promise = Promise.reject("1");

promise
  .then(
    config => {
      console.log("2");
    },
    err => {
      console.log("3");
    }
  )
  .then(() => {
    console.log("trigger timeout");
    setTimeout(() => {
      console.log("exec timeout");
    });
  })
  .then(
    config => {
      console.log("6");
    },
    err => {
      console.log("7");
    }
  )
  .then(
    config => {
      console.log("8");
    },
    err => {
      console.log("9");
    }
  );

输出

3
trigger timeout
6
8
exec timeout
  • 如果两个参数函数,返回 promise,则后面的 then 会等待前面的 promise 执行完之后,才去执行;

    // 0.5秒后返回input*input的计算结果:
    function multiply(input) {
      return new Promise(function(resolve, reject) {
        log("calculating " + input + " x " + input + "...");
        setTimeout(resolve, 500, input * input);
      });
    }
    
    // 0.5秒后返回input+input的计算结果:
    function add(input) {
      return new Promise(function(resolve, reject) {
        log("calculating " + input + " + " + input + "...");
        setTimeout(resolve, 500, input + input);
      });
    }
    
    var p = new Promise(function(resolve, reject) {
      log("start new Promise...");
      resolve(123);
    });
    
    p.then(multiply)
      .then(add)
      .then(multiply)
      .then(add)
      .then(function(result) {
        log("Got value: " + result);
      });

    promise 链式操作与其他 JS

    const f = () => console.log("now");
    Promise.resolve().then(f);
    console.log("next");
    
    // next
    // now

    这个问题涉及到 这一次,彻底弄懂 JavaScript 执行机制

原文链接:segmentfault.com

上一篇:axios 源码学习
下一篇:Vue数据响应式原理代码剖析
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入