解决异步回调的利器，Promise，字如其意

一、Promise简介

1.1 Promisi是干什么的？

Promise是JavaScript中解决异步编程的方案，提高了异步代码的可读性，用于处理异步回调地狱问题。promise本质上是一个包装了异步操作的对象，能让我们在面对异步操作的时候让代码写起来更清晰、优雅。

1.2 为什么要使用Promise？

优化了异步操作的控制流程，避免了嵌套和回调地狱。

更好地处理异步操作的状态和结果，使代码更加清晰、简洁。

可以使用Promise自身的多种方法来应对不同的异步操作，简化代码。

二、Promise的状态

Promise有三种状态：等待中(pending...)、成功(resolved)、失败(rejected)。promise状态只能从等待中变为成功或者失败，状态一旦改变，无法再更改。

2.1 pending

Promise创建后的初始化状态，进行中，表示 Promise 还在执行阶段，没有执行完成。

2.2 fulfilled

成功状态，表示 Promise 成功执行完成。

2.3 rejected

拒绝状态，表示 Promise 执行被拒绝，也就是失败。

三、Promise原型对象的方法

Promise自身的方法有.then()，.catch()，.all()，.finally()，.race()等。

3.1 .then()

Promise.resolve() 方法返回一个以给定值解析后的 Promise 对象。如果参数本身就是一个Promise 对象，那么Promise.resolve() 方法会直接返回该对象，不会创建新的Promise对象。

3.2 .catch()

.catch() 方法注册一个回调函数，用于处理 Promise 失败状态的结果。它接受一个参数：失败回调函数。

3.3 .all()

Promise.all 方法，提供了并行执行异步操作的能力，并且在所有异步操作完成之后，统一返回所有结果。

3.4 .race()

Promise.race 用法与 all 一样，只是返回结果上不同，它返回的是执行最快的那个 Promise 的结果。

3.4 .finally()

四、Promise的链式调用

假设一个需求：

• 第一次将firstName名字新改为name1，
• 拿到修改后的结果，然后修改为name2。
• 再拿到二次修改后的结果，最后修改为name3。

 

const myPms = new Promise((res, rej) => {
    res(axios.post("https://测试接口.../setApi/", { "oldName": "firstName", "newName": "name1" }))
  }).then(res => {
    console.log(res.data.data);
    return axios.post("https://测试接口.../setApi/", { "oldName": res.data.data.newName, "newName": "name2" })
  }).then(res => {
    console.log(res.data.data);
    return axios.post("https://测试接口.../setApi/", { "oldName": res.data.data.newName, "newName": "name3" })
  }).then(res => {
    console.log(res.data.data);
  })

控制台打印：

这种场景就是接口的多层嵌套使用，Promise可以把多层嵌套按照线性的方式进行书写，非常优雅。我们把 Promise 的多层嵌套调用就叫做链式调用。

五、async/await

async/await是一种在JavaScript中处理异步操作的语法糖，它使得异步操作的代码看起来像是同步的代码，使得异步操作更加容易理解和对调试，同时也能够避免回调地狱。

async/await是基于Promise实现的，async函数返回一个Promise对象，await可以等待一Promise对象的执行结果，如果该Promise对象是resolved状态，则返回其resolve的结果；如果该Promise对象是rejected状态，则抛出其reject的原因。async/await可以用更优雅的方式处理异步代码。

sync函数需要使用async关键字来声明，它可以包含多个await语句，await语句必须在async函数中使用，用来等待Promise对象的执行结果。使用async/await的代码看起来像是同步代码，但实际上是异步执行的。

async/await可以用于处理所有需要异步执行的场景，如网络请求、文件读写等操作。它特别适用于需要按照顺序执行多个异步操作的场景，可以避免回调地狱，提高代码的可读性和可维护性。

const myAsync = async () => {
    const resData1 = await axios.post("https://测试接口.../setApi/", { "oldName": "firstName", "newName": "name1" });
    console.log(resData1.data.data.newName);
    const resData2 = await axios.post("https://测试接口.../setApi/", { "oldName": resData1.data.data.newName, "newName": "name2" });
    console.log(resData2.data.data.newName);
    const resData3 = await axios.post("https://测试接口.../setApi/", { "oldName": resData2.data.data.newName, "newName": "name3" });
    console.log(resData3.data.data.newName);
    return resData3.data;
  }


myAsync().then(res => {
    console.log("输出：",res);
});

 控制台输出为：

 上面的代码使用async/await处理了几个异步请求，等待每个请求的结果后再执行下一个请求，最终返回最终的结果。代码看起来像是同步执行的，但实际上是异步执行的。

async/await相比Promise链式调用更具有可观性，使代码更加简洁易懂。

2024甲辰龙年，新的一年在此祝大家：

龙年大吉、龙凤呈祥、龙马精神、龙飞凤舞、龙腾四海、龙潜凤采、神龙马秀、龙腾虎跃、龙韵虎步、鸾凤和鸣、龙门点额、龙争虎斗、龙行天下、飞龙在天、元龙高卧、跨凤乘龙！