Promise相关概念

Promise 检测图片

检测图片是否加载成功，成功就正常显示，失败就展示默认图片

import Vue from "vue";
// 图片失败指令, 因为口袋贵金属用户有些头像无法显示
// 全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
Vue.directive("gkoudai-avatar-img", async function(el) {
  // 指令名称为：real-img
  let imgURL = el.getAttribute("src"); // 获取图片地址
  if (imgURL) {
    let exist = await imageIsExist(imgURL);
    if (!exist) {
      el.setAttribute(
        "src",
        "url"
      );
    }
  }
});

/**
 * 检测图片是否存在
 * @param url
 */
let imageIsExist = function(url) {
  return new Promise(resolve => {
    var img = new Image();
    img.onload = function() {
      if (this.complete === true) {
        resolve(true);
        img = null;
      }
    };
    img.onerror = function() {
      resolve(false);
      img = null;
    };
    img.src = url;
  });
};

休眠的实现方法

function sleep(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  })
}
// 用法
async function one2FiveInAsync() {
  for(let i = 1; i <= 5; i++) {
    console.log(i);
    await sleep(1000);
  }
}
one2FiveInAsync();

基本用法

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

有一点需要注意，如果是new Promise 那么是立刻执行里面的代码 promise.then才是微任务

Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
 }；

不管最后是成功还是失败都会执行finally中的callback 这个我们可以把成功或者失败后需要操作的代码都拿到finally中去写

Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
p1,p2，p3的状态都成功了，那么p的状态才成功，否则有一个失败了那么p的状态就会失败

Promise.race()

和Promise.all()很相似，不同点是，接受多个promise实例，有一个成功那么p的状态就是成功的，率先成功的，会把结果传递给p的回调函数

Promise.allSettled()

这个是ES2020新添加的属性，接受一组Promise实例，等待所有实例都完成，那么p的状态才会改变，有时候我们只关系我们的操作是否结束，不关心结果，all()就不太好用，那么allSettled就会比较符合场景

Promise.any()

接收一组promise实例，只要有一个实例 成功了那么p状态就是成功的，只有当所有状态都失败了，那么p的状态才会失败

Promise.try()

让同步函数同步，让异步函数异步，更好的处理结果和错误，不用管自己代码是异步还是同步

  .then(...)
  .catch(...)