ES6中promise的使用方法

 先看看ES5中异步编程的使用。

let ajax = function (callBlack) {
  setTimeout(function () {
    callBlack && callBlack()
  }, 1000);
}
ajax(function () {
  console.log(1)
});

 在ES6中使用Promise来解决异步编程。

let ajax = function () {
  return new Promise(function (reslove, reject) {
    setTimeout(function () {
      reslove()
    }, 1000);
  })
}
ajax().then(function () {
  console.log(1);
})

 有多个步骤，让异步编程更加简单。

let ajax = function () {
  return new Promise(function (reslove, reject) {
    setTimeout(function () {
      reslove()
    }, 1000);
  })
}
ajax().then(function () {
  console.log(1);
  return new Promise(function (reslove, reject) {
    setTimeout(function () {
      reslove()
    }, 2000);
  })
}).then(function () {
  console.log(2)
});

 在Promise中可以使用catch来捕获异常。

let ajax = function (num) {
  return new Promise(function (reslove, reject) {
    if (num > 1) {
      reslove();
      return;
    }
    throw new Error("错误");
  })
}
ajax(0).then(function () {
  console.log("正确");
}).catch(function (err) {
  console.log(err);
});

 下面是一个案例，目的是当页面的图片都加载完才把图片显示到页面中，如果其中有一个出错了就不显示。

function loading(src) {
  return new Promise((resolve, reject) => {
    let img = document.createElement("img");
    img.src = src;
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function (err) {
      reject(err)
    }
  })
}

function showimg(imgs) {
  imgs.forEach(function (img) {
    document.body.appendChild(img);
  });
}
Promise.all([
  loading("./img/banner01.jpg"),
  loading("./img/banner02.jpg")
]).then(showimg);

 下面这个例子是当图片先加载的先显示出来，没加载的就不再显示了。

function loading(src) {
  return new Promise((resolve, reject) => {
    let img = document.createElement("img");
    img.src = src;
    img.onload = function () {
      resolve(img);
    };
    img.onerror = function (err) {
      reject(err)
    }
  })
}

function showimg(imgs) {
  let p = document.createElement("p");
  p.appendChild(imgs)
  document.body.appendChild(p);
}
Promise.race([
  loading("./img/banner01.jpg"),
  loading("./img/banner02.jpg")
]).then(showimg);