Promise如何进行处理
Bitgeek 2024-05-01 vue3vuevite
# Promise
# Promise介绍
Promise是编程中用于处理异步操作的一种设计模式,Es6写进了语言标准,特别是在JavaScript等语言中被标准化为一种内置对象。Promise 对象用于表示一个异步操作的最终完成(成功或失败)及其结果值。 当你开始一个异步操作(如读取文件、网络请求等),返回的是一个 Promise 对象,而不是立即得到结果。这个 Promise 对象有三种状态:
- pending(进行中):初始状态,既没有被兑现(resolved),也没有被拒绝(rejected)。
- fulfilled(已成功):操作成功完成,Promise 状态从“pending”变为“fulfilled”,此时可以获取到异步操作的结果。
- rejected(已失败):操作失败,Promise 状态从“pending”变为“rejected”,此时可以获取到错误信息。
Promise 提供了.then方法来注册当 Promise 对象状态改变时的回调函数,无论是成功还是失败。同时还有.catch方法来捕获错误,以及.finally方法在无论 Promise 状态如何变化都会执行的清理逻辑。
使用 Promise 可以让异步代码更易于理解和维护,它能解决回调地狱的问题,使得异步操作可以链式调用,增强代码的可读性和流程控制能力
# Promise状态
# 进行中的状态pengding
// pending最一开始的状态
let p = new Promise((resolve,reject)=>{
})
console.log(p)
# 执行结果
# 已成功的状态fulfilled
let p = new Promise((resolve,reject)=>{
resolve()
})
console.log(p)
# 执行结果
# rejected已失败的状态
let p = new Promise((resolve,reject)=>{
reject()
})
console.log(p)
# 执行结果
# 如果调用resolve()也调用reject()
let p = new Promise((resolve,reject)=>{
resolve()
reject()
})
console.log(p)
# 执行结果
# Promise 的状态一旦变化,就不会在改变了 pending==>fulfilled 谁在前面就是什么状态
# then()方法
let p = new Promise((resolve,reject)=>{
resolve()
})
p.then(()=>{
console.log("成功")
},()=>{
console.log("失败")
})
# 执行结果
# pending==>fulfilled 就会执行then第一个回调,pending==>rejected就会执行第二个回调
# reslove()和reject()传参
let p = new Promise((resolve,reject)=>{
resolve({name:"李嘉城",age:20})
})
p.then((data)=>{
console.log(data)
},()=>{
console.log("失败")
})
# Promise基本用法
Promise 对象是一个构造函数,用来生成Promise实列
let promise = new Promise((resolve,reject)=>{
if(true){
resolve("成功")
}else{
reject("失败")
}
})
promise.then((data)=>{
console.log(data)
}).catch((error)=>{
console.log(error)
})
# 执行结果
# Promise加载图片
const oImg = new Image();
oImg.src = "./2.jpg";
oImg.onload = function () {
document.body.appendChild(oImg);
};
oImg.onerror = function () {
console.log("图片加载失败");
};
function loadImg(src) {
return new Promise((resolve, reject) => {
const oImg = new Image();
oImg.src = src;
oImg.onload = function () {
resolve(oImg);
};
oImg.onerror = function () {
reject(`图片${src}加载失败`);
};
});
}