理解 JavaScript Promise👩‍💻👨‍💻

Promise 是 JavaScript 最重要的特性之一，它通过减少回调函数数量，让我们能够编写更简洁的代码，并使我们能够以更线性的方式执行异步操作。今天，你将学习 Promise 的工作原理以及如何在代码中应用它们。

我们开始吧，好吗？:)

承诺到底是什么？🧐

Promise 是一个对象，表示尚未完成的异步操作，但预计会在未来的某个时间提供值。Promise 对象支持两个属性：State和Result。

状态与结果

Promise 对象有三种可能的状态：Pending、Fulfilled和Rejected。当异步操作启动时，Promise 会被创建并进入pending（工作）状态。在 pending 状态下，结果没有值；因此为“ undefined ”。
如果异步操作成功完成，Promise 会切换到 resultfulfilled状态并返回一个值。如果操作失败，状态会切换到，rejected并给出原因。

很高兴知道📌

我们称之为回调的函数会传递一个完成的 onfulfilled 值，而我们称之为回调的函数会传递一个拒绝的 onrejected 原因。

Promise 真的有用吗？🤔

是的！Promise 在复杂的逻辑应用中非常实用，它可以轻松处理多个异步操作，并提供比回调更好的错误处理能力。简而言之，Promise 是同时处理多个回调的完美选择。

很高兴知道📌

如果你发现自己有太多嵌套函数，以至于让你心力交瘁，那么你可能正处于我们所说的“毁灭金字塔”，也称为回调地狱。这时，你或许应该考虑使用 Promise 了;)

末日金字塔是这样的👇

好了，技术术语讲得够多了，让我们通过一个真实的例子来更准确地理解承诺，然后直接跳到编码部分:)

真实案例：🐤
假设你在线下单购买一只小黄鸭。订单会被创建并开始处理。（在这种情况下，会创建一个 Promise 并处于 on 状态pending。）

如果产品有货，您的订单将得到确认。（换句话说，这就是承诺得到履行的时刻；fulfilled）

如果产品缺货，您的订单将被取消。（在这种情况下，正如您可能已经猜到的那样，承诺未能兑现，因此rejected）

你还在关注吗？太好了，现在我们来写代码，让它更直观一些 ;)

编码会话💻

在深入探讨之前，我们先来看看如何创建 Promise。创建 Promise 的方法有很多种，但最常用的是使用promise构造函数。构造函数也称为执行函数，它promise会接受一个函数作为参数。

例子：

const promise = new Promise((resolve, reject) => {
   // Here is where the asynchronous operation starts.
      resolve('value');
});

我们在这里所做的是，创建一个以值解析的 Promise。简而言之，它就是fulfilled。

你能猜到我们如何创建一个可以拒绝并给出原因的 Promise 吗？不妨试试 ;)

就在这里👇

const promise = new Promise((resolve, reject) => {
    // Start of the async operation 
    reject('reason');
});

很高兴知道📌

Promise.resolve() 您还可以使用和 Promise.reject() 方法创建已经解决或拒绝的承诺。

例如：

const promise = Promise.resolve('value'); 

const promise = Promise.reject('reason');

好了，现在你已经知道了如何创建一个承诺，让我们回到现实世界的例子:)

回到我们现实世界的例子，但带有代码🐤

//We are going to place an online order for our Rubber duck

function placeOrder(product) {
  return new Promise(function(resolve, reject) {
    if(product === 'Rubber Duck') {
      resolve('Confirmed order');
       }else { reject('Sorry your order has been cancelled');
    }
   })
  };

如果您的订单被接受，它将显示订单状态。如果订单被拒绝，那么您的代码可能就到此为止了。

/* Let's assume your order has been accepted and display the status :) */ 

function orderStatus(order) {
    return new Promise(function(resolve) {
      console.log("Order is being processed");
        resolve(`Your ${order} has been delivered :)`);
     })
   };

Promise 链⛓

Promise 的优点之一是它们可以绑定在一起。这允许您创建一系列异步操作，其中一个操作的输出将作为下一个操作的输入。
您可以使用Promise.then()方法来链接 Promise。

例如：

// Scenario with Chain promises

placeOrder('Rubber Duck').then(function(orderFromCustomer){
    console.log("Request received");
    let orderProcessed=orderStatus(orderFromCustomer);
    return orderProcessed;
}).then(function(orderProcessed){
    console.log(orderProcessed);
}).catch(function(error){
    console.log(error);
})

这是完整代码👇

//We are going to place an online order for our Rubber duck

function placeOrder(product) {
  return new Promise(function(resolve, reject) {
    if(product === 'Rubber Duck') {
      resolve('Confirmed order');
       }else { reject('Sorry your order has been cancelled');
    }
   })
  };

/* Let's assume your order has been accepted and display the status :) */ 

function orderStatus(order) {
    return new Promise(function(resolve) {
      console.log("Order is being processed");
        resolve(`Your ${order} has been delivered :)`);
     })
   };

// Scenario with Chain promises

placeOrder('Rubber Duck').then(function(orderFromCustomer){
    console.log("Request received");
    let orderProcessed=orderStatus(orderFromCustomer);
    return orderProcessed;
}).then(function(orderProcessed){
    console.log(orderProcessed);
}).catch(function(error){
    console.log(error);
})

// Output: Request received
//         Order is being processed
//         Your Confirmed order has been delivered :)

错误处理

错误处理有助于管理错误，并帮助程序在不被中断的情况下恢复运行。在 JavaScript 中，我们使用它Promise.catch()来捕获错误。它仅处理.then()方法之间可能发生的错误。

也许一个例子可能会有所帮助:)

const promise = new Promise((resolve, reject) => {
    if(true) {
      resolve("It's workiiing!"); 
    } else { 
       reject("There is an error");
   } 
});

promise 
    .then(result => console.log(result))
    .then(result2 => {
         throw Error   // line 12
         console.log(result2);
}) 
    .catch(() => console.log('erroooor')); //last line

// Output: It's workiiing! 
//         erroooor

正如你在这里看到的，我们在第 12 行抛出了一个错误，正常情况下程序应该被中断。但是.catch()最后一行的方法能够捕获错误并将其记录到控制台，以确保程序能够顺利运行。（你可以尝试删除最后一行，然后检查程序是否正常运行）

异步/等待

Async/await是一种语法特性，它允许我们以更类似于同步函数的方式编写异步代码。

关键字Async让 JavaScript 引擎知道我们正在声明一个异步函数。

该await关键字使函数暂停执行并等待已解决的承诺，然后再继续下一行代码。

例如：

async function test() { 
    const value = await promise; 
// The code on this line will only be executed after the promise is resolved. 
}

太好了，现在还有一件事☝️。

异步函数使用try/catch语句进行错误处理。

它是如何工作的？

好吧，我们要执行的代码进入 try 块，并且在执行该执行时，如果出现错误，它将通过 catch() 块。

让我们来看看吧:)

async function test() { 
    try { 
        const value = await promise; 
       } catch (error) { 
// The code on this line is executed if the promise is rejected. 
}}

结论

Promise太棒了！它是 JS 的核心特性，让我们能够更同步地编写异步代码。在 Promise 出现之前，我们的代码里充斥着令人困惑的回调技巧和异步代码。

它们非常适合同时管理多个回调、错误处理、执行异步函数等等。

希望你喜欢这篇文章❤️

太棒了，代码量真大！恭喜你完成了这么多！以后想再看的时候，可以收藏一下。

如果您喜欢它，请留下点赞或评论让我知道:) 或者如果您希望我将来写某个主题。

感谢您的时间，

编码快乐，圣诞快乐✨🎄🎅

鏂囩珷鏉ユ簮锛�https://dev.to/klc/understanding-javascript-promises-1hp1