在前端开发中，异步操作是一个常见的需求。由于JavaScript是一门单线程语言，异步操作可以避免堵塞UI线程，提高用户体验。当我们使用异步操作时，往往需要获取异步操作的结果，这时Promise就给我们提供了一种实现。
Promise 概念介绍
Promise是异步编程的解决方案之一，通过它可以更方便、更优雅地处理异步操作。Promise表示一个异步操作最终能够生成一个值，也可以是异常。Promise是一个对象，它可以有三种状态：
- Pending（进行中）
- Fulfilled（已成功）
- Rejected（已失败）
Promise的状态只可以从进行中转换到已成功或已失败，并且状态一旦转变就不可更改。
当Promise状态变成已成功时，会使用resolve方法传递结果；当Promise状态变成已失败时，会使用reject方法传递错误。
Promise 用法示例
一个Promise实例可以通过new Promise()来生成。Promise构造函数接收一个函数作为参数，这个函数接收两个回调函数作为参数，一个是resolve用来处理成功的情况，另一个是reject用来处理执行过程中的错误情况。
以下是一个简单的示例，展示了如何使用Promise实现简单的异步操作：
-- -------------------- ---- ------- -------- -------------- - ------ --- ----------------- ------- -- - ----- --- - --- ----------------- ---------------------- - -- -- - -- --------------- --- - -- ---------- --- ---- - -------------------------------------- - ---- -- --------------- --- -- - ------------------- - -- --------------- ---- ------ ----------- --- -展开代码
上面的代码中，fetchData函数通过使用XMLHttpRequest来发起一个GET请求，并在请求成功时调用resolve方法处理返回结果。在请求失败时，调用reject方法来处理错误情况。
调用fetchData函数可以得到一个Promise对象。该对象的状态最初是进行中，当成功时状态变成已成功，当出现错误时状态变成已失败。可以使用Promise对象的.then()和.catch()方法来处理Promise的状态。
以下是一个示例：
fetchData("https://api.github.com/users/defunkt") .then(user => { console.log(user.name); }) .catch(error => { console.error(error); });
在上面的代码中，我们使用.then()方法来处理Promise的成功状态。当一个Promise对象达到成功状态时，.then()方法的回调函数将会被调用，并将成功的值作为参数传入。在上面的例子中，我们可以通过user.name获取用户的名称。在失败状态下，我们使用.catch()方法来处理Promise的错误状态。当一个Promise对象达到错误状态时，.catch()方法的回调函数将会被调用，并将错误作为参数传递给它。
返回异步函数结果的 Promise
在JavaScript中，异步函数通常返回Promise对象。那么如何在异步函数完成后获取其结果呢？
假设我们有一个异步函数getRandomNumber，它返回一个随机数。
function getRandomNumber() { return new Promise((resolve, reject) => { setTimeout(() => { const randomNumber = Math.floor(Math.random() * 10) + 1; resolve(randomNumber); }, 1000); }); }
我们可以通过以下方式使用该函数：
getRandomNumber() .then(number => { console.log(number); }) .catch(error => { console.error(error); });
但是，有时候我们需要使用异步函数的结果进行下一步操作。下面是如何使用Promise返回异步函数结果：
function getResultFromAsyncFunction(asyncFunction) { return new Promise((resolve, reject) => { const result = asyncFunction(); resolve(result); }); }
然后，我们可以通过以下方式使用这个函数：
getResultFromAsyncFunction(getRandomNumber) .then(number => { console.log(number); }) .catch(error => { console.error(error); });
在上面的代码中，我们将异步函数getRandomNumber作为参数传递给getResultFromAsyncFunction函数。该函数返回一个Promise，该Promise在异步函数完成后解析并返回异步函数的结果。
在上述范例中，getResultFromAsyncFunction函数只是简单地调用异步函数并返回结果。如果想为异步函数实现例外/错误管理，还需要添加try/catch块或在最后添加.catch()。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c12ba2314edc26848cd335
