promise的简单使用

何为回调地狱

回调地狱：回调函数内部嵌套多个回调函数，程序维护困难，且不易阅读，promise是解决回调地狱的一种处理办法。

promise使用

• 介绍
  • 是一个对象，应用场景类似“当xxx完成，then执行xxx”，可以存放同步和异步代码
• 使用
  • 创建函数
  • 封装一个Promise对象

  {
    // 异步回调函数
    function ajax() {
    	// resolve：程序下一步要执行的函数，reject：程序出错时要执行的函数
      return new Promise((resolve, reject) => {
        setTimeout(() => resolve(), 1000);
      });
    }
  
    ajax()
      .then(() => {
        console.log("任务1");
        return new Promise((resolve) => {
          setTimeout(() => resolve(), 1000);
        });
      })
      .then(() => {
        console.log("任务2");
      });
  }
  

  • catch捕捉异常

  {
    // catch 捕捉错误
    function isNumber(num) {
      return new Promise((res, rej) => {
        if (typeof num === "number") {
          res(num);
        } else {
          console.log(typeof num);
          let err = new Error("this is not number");
          rej(err);
        }
      });
    }
  
    isNumber("2")
      .then((num) => console.log(num))
      .catch((err) => console.log(err)); // Error: this is not number
  }
  

  • Promise.all()：当all中的方法全部执行完成才执行then中的方法
  • Promise.race():race中的方法只要有一个执行完成便执行then中的方法

   // Promise.all()
  const imgUrl1 =
  "http://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/video/1901/vue/vue.png";
  const imgUrl2 =
  "http://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/video/1901/webpack/webpack.png";
  const imgUrl3 =
  "https://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xdclass_pro/video/2019_frontend/html_css/html.png";
  
  function getImg(url) {
  return new Promise((res, rej) => {
    let img = document.createElement("img");
    img.src = url;
    // 图片加载完成
    img.onload = res(img);
    // 图片加载失败
    img.onerror = rej(err);
  });
  }
  
  function showImg(imgs) {
  if (imgs instanceof Array) {
    imgs.forEach((img) => {
      document.body.appendChild(img);
    });
  } else {
    document.body.appendChild(imgs);
  }
  }
  
  // 等全部完成再执行then函数
  //   Promise.all([getImg(imgUrl1), getImg(imgUrl2), getImg(imgUrl3)]).then(
  //     showImg
  //   );
  
  // 有一个加载完成都会执行then函数
  Promise.race([getImg(imgUrl1), getImg(imgUrl2), getImg(imgUrl3)]).then(
  showImg
  );