【JavaScript】Promise对象详解

Promise是一种处理异步操作的一种对象（包装异步操作的结果），提供了一种统一的方式来处理成功值或者失败原因。Promise对象有三种状态，pending（进行中）、fulfilled（已成功）和rejected（已失败）三种状态

状态管理：Promise对象的状态表示异步操作的状态，一旦状态从pending变为fulfilled或rejected，就不会再改变。

链式调用：通过.then()和.catch()方法，Promise支持链式调用，使得异步操作的结果可以依次传递和处理，形成清晰的异步流程。

错误处理：Promise通过.catch()方法捕获并处理链式调用中的错误，提供了一种统一的错误处理机制。

接下来看代码已经具体场景帮助理解：

function maPromise() {
    return new Promise((resolve,reject)=>{
        // 模拟异步操作，如网路请求，这里使用定时器
        setTimeout(() => {  
            const success = Math.random() > 0.5; // 随机决定操作是否成功  
            if (success) {
              resolve('操作成功');  
            } else {  
              reject('操作失败');  
            }  
          }, 1000); 
    })
}
maPromise().then(result=>{
    console.log(result);    //  如果success为真，则resolve调用，promise的状态转换为fulfilled
    // 打印结果为  '操作成功'
}).catch(error=>{
    console.log(error);      //  如果success为真，则resolve调用，promise的状态转换为rejected
    // 打印结果为“操作失败”
})

这是一个简单的Promise，有兴趣的小伙伴可以改变一下success的值，验证一下失败的打印结果

async/await

async/await（ES7）属于是Pormise对象的语法糖，感觉应该放在这里进行描述。它的出现使得异步代码的编写和阅读更加直观和易于理解。

---

async

• 定义：async用于声明一个异步函数。异步函数是指通过事件循环异步执行的函数，它会返回一个Promise对象。
• 用法：在函数定义前加上async关键字，即可将该函数标记为异步函数。异步函数内部可以使用await来等待一个Promise对象的结果。
• 返回值：异步函数总是返回一个Promise对象。如果函数返回的是一个非Promise类型的数据，则Promise的状态为fulfilled成功；如果抛出异常，则Promise的状态为rejected失败。

await

• 定义：await是一个操作符，用于等待一个Promise对象解决（resolve）并返回其结果。
• 用法：await只能在async函数内部使用。它右侧的表达式一般为Promise对象，它会暂停async函数的执行，直到Promise对象解决并返回其结果。
• 返回值：await返回的是Promise对象解决后的值。

接下来看代码已经具体场景帮助理解：

大家可以对比一下这两段代码，直接使用Promise和使用async/await

fetch(`/api1/search/users2?q=${value}`).then((res)=>{
      // console.log(res.json(),'chengogng'); 
      return res.json();
    }
    ).then(res=>{
     console.log('获取数据成功了',res); 
    }).catch((err)=>{
      // 统一处理错误
      console.log(err);
    })


search = async () => {
    try {
      const response = await fetch(`/api1/search/users2?q=${value}`);
      const data = await response.json();
      console.log(data); 
    } catch (error) {
      console.log('请求出错',error);
    }
  };

这是对fetch请求(ES6)的一个例子，本身fetch调用之后返回值是一个Promise,第一种方式，如果请求成功了，调用then方法来获取成功之后的值，切记要调用json()方法，然后调用catch方法兜底处理错误；

第二种方式：声明了search为一个Promise函数，await操作符用来等待这个函数的返回结果（respoonse），使用try/catch为了捕获请求错误；

关于fetch请求和xhr请求：【JavaScript】XHR请求和fetch请求详解-CSDN博客

这里是一个简单的Promise习题：可以在评论区验证自己的答案奥（有宏任务和微任务）

const first = () => (new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
        console.log(7);
        setTimeout(() => {
            console.log(5);
            resolve(6);
        }, 0)
        resolve(1);
    });
    resolve(2);
    p.then((arg) => {
        console.log(arg);
    });

}));

first().then((arg) => {
    console.log(arg);
});
console.log(4);