ES6中的Promise

[alanhg]

Promise的作用是解决回调金字塔的问题

function myAsyncFunction(url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", url);
            xhr.onload = () => resolve(xhr.responseText);
            xhr.onerror = () => reject(xhr.statusText);
            xhr.send();
        });
    }

    myAsyncFunction("a.json").then(function (value) {
        console.log(value);
    })

[alanhg]

Promise的链式调用及中止

如下为3个方法连续执行

var firstMethod = function () {
        return new Promise(function (resolve, reject) {
            console.log('first method completed');
            resolve({data: 'firstMethod-ERROR'});
        });
    };


    var secondMethod = function (someStuff) {
        return new Promise(function (resolve, reject) {
            console.log('second method completed');
            resolve({data: "secondMethod-ERROR"});
        });
    };

    var thirdMethod = function (someStuff) {
        return new Promise(function (resolve, reject) {
            console.log('third method completed');
            resolve({data: "thirdMethod-ERROR"});
        });
    };

    firstMethod()
        .then(secondMethod).then(thirdMethod).catch((res) => {
        console.log("catch");
        console.log(res);
    });

输出结果为:

第一个方法异常，promise链中止

 var firstMethod = function () {
        return new Promise(function (resolve, reject) {
            console.log('first method completed');
            reject({data: 'firstMethod-ERROR'});
        });
    };


    var secondMethod = function (someStuff) {
        return new Promise(function (resolve, reject) {
            console.log('second method completed');
            resolve({data: "secondMethod-ERROR"});
        });
    };

    var thirdMethod = function (someStuff) {
        return new Promise(function (resolve, reject) {
            console.log('third method completed');
            resolve({data: "thirdMethod-ERROR"});
        });
    };

    firstMethod()
        .then(secondMethod).then(thirdMethod).catch((res) => {
        console.log("catch");
        console.log(res);
    });

输出结果为:

相关文档

• Promise 的链式调用与中止

[alanhg]

一个问题

  function myPromiseRace(arr) {
        return new Promise((resolve, reject) => {
          for (let item of arr) {
            item.then(
              (res) => {
                resolve(res);
              },
              (err) => {
                reject(err);
              }
            );
          }
        });
      }
      function myPromiseRace2(arr) {
        return new Promise((resolve, reject) => {
          for (let item of arr) {
            item
              .then((res) => {
                resolve(res);
              })
              .catch((err) => {
                reject(err);
              });
          }
        });
      }

      let p1 = Promise.reject(1),
        p2 = Promise.resolve(2),
        p3 = Promise.resolve(3);

      myPromiseRace([p1, p2, p3])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });

      myPromiseRace2([p1, p2, p3])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });

[alanhg]

Primise.all实现

function promiseAll(promiseBs = []) {
  return new Promise(function (resolve) {
    let resArr = [];
    for (let index = 0; index < promiseBs.length; index++) {
      promiseBs[index].then(function (res) {
        resArr[index] = res;
        if (resArr.filter(Boolean).length === promiseBs.length) {
          resolve(resArr);
        }
      });
    }
  });
}

promiseAll([
  Promise.resolve(11111),
  Promise.resolve(1),
  Promise.resolve(11),
  Promise.resolve(111),
  Promise.resolve(1111),
]).then((res) => {
  console.log(res);
});

[alanhg]

原型

Promise.all2 = function (promises) {
  return new Promise((resolve) => {
    let arr = new Array(promises.length);
    let count = 0;
    promises.forEach((p, index) => {
      p.then((res) => {
        ++count;
        arr[index] = res;
        if (count == arr.length) {
          resolve(arr);
        }
      });
    });
  });
};

const p = Promise.all2([
  Promise.resolve(1),
  Promise.resolve(11),
  Promise.resolve(1111)
]).then((res) => console.log(res));

[alanhg]

题

var date = new Date() 

console.log(1, new Date() - date) 

setTimeout(() => {
    console.log(2, new Date() - date)
}, 500) 

Promise.resolve().then(console.log(3, new Date() - date)) 

while(new Date() - date < 1000) {} 

console.log(4, new Date() - date)