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 執行機制