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(...)
