Promise

Promise介绍

Promise是编程中用于处理异步操作的一种设计模式，Es6写进了语言标准,特别是在JavaScript等语言中被标准化为一种内置对象。Promise 对象用于表示一个异步操作的最终完成（成功或失败）及其结果值。 当你开始一个异步操作（如读取文件、网络请求等），返回的是一个 Promise 对象，而不是立即得到结果。这个 Promise 对象有三种状态：

1. pending（进行中）：初始状态，既没有被兑现（resolved），也没有被拒绝（rejected）。
2. fulfilled（已成功）：操作成功完成，Promise 状态从“pending”变为“fulfilled”，此时可以获取到异步操作的结果。
3. 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}加载失败`);
    };
  });
}

执行结果