Promise 使用心得

通常用法

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 执行机制