在前端开发中，经常需要处理异步操作，Promise 是一种常见的解决方案，它可以解决回调地狱的问题，让异步调用变得清晰易懂。
但是，Promise 中异步函数的返回值问题是一个容易导致迷惑和错误的问题，本文将详细解析这个问题，帮助你更好地理解和使用 Promise。
Promise 中异步函数的返回值
在 Promise 中，异步函数的返回值有以下三种情况：
- 返回一个值
- 返回一个 Promise
- 抛出一个错误
返回一个值
如果异步函数返回一个值，Promise 将会自动将这个值封装成一个已经完成的 Promise。例如：
function getValue() { return 1; } Promise.resolve(getValue()).then(function (value) { console.log(value); // 输出 1 });
在这个例子中，getValue 函数返回一个值 1，Promise.resolve 方法将这个值封装成一个已经完成的 Promise，然后将其传递给 then 方法。
返回一个 Promise
如果异步函数返回一个 Promise，Promise 将直接使用这个 Promise 作为自己的返回值。例如：
-- -------------------- ---- ------- -------- ---------- - ------ --- ---------------- --------- - ----------- --- - ----------------------------------------- ------- - ------------------- -- -- - ---展开代码
在这个例子中，getValue 函数返回一个 Promise，Promise.resolve 方法直接使用这个 Promise 作为自己的返回值，然后将其传递给 then 方法。
抛出一个错误
如果异步函数抛出一个错误，Promise 将会自动将这个错误封装成一个已经拒绝的 Promise。例如：
function getValue() { throw new Error('something wrong'); } Promise.resolve(getValue()).catch(function (error) { console.error(error.message); // 输出 something wrong });
在这个例子中，getValue 函数抛出一个错误，Promise.resolve 方法自动将这个错误封装成一个已经拒绝的 Promise，然后将其传递给 catch 方法。
Promise 中异步函数的调用时机
在 Promise 中，异步函数的调用时机是由 Promise 自身控制的，而不是由异步函数自己控制的。Promise 首先会在当前线程中执行同步代码，然后在下一个事件循环中执行异步代码。
例如：
-- -------------------- ---- ------- -------- ---------- - ------ --- ---------------- --------- - ------------------- -- - ------------------------ ----------- -- ------ ---------------------- --- - ----------------------------------------- ------- - ------------------- -- -- - ---展开代码
在这个例子中，getValue 函数返回一个需要 1 秒后才能完成的 Promise。Promise.resolve 方法会在当前线程中执行同步代码，然后将 getValue 函数作为一个参数传递给它。Promise.resolve 方法会创建一个新的 Promise，并将它返回给调用者。接着，Promise 将会在下一个事件循环中执行异步代码，也就是调用 getValue 函数。
getValue 函数会在 1 秒后通过 resolve 方法传递一个值 1 给新创建的 Promise，并在控制台输出 resolved。
最后，then 方法会在下一个事件循环中被调用，并接收到值为 1 的参数。然后在控制台输出这个值。
Promise 中异步函数的链式调用
在 Promise 中，异步函数可以以上一个 Promise 的返回值作为自己的参数，以实现链式调用。例如：
-- -------------------- ---- ------- -------- ---------- - ------ --- ---------------- --------- - ------------------- -- - --------------------- ----------- ----------- -- ------ --- - -------- ------------- - --------------------- ------- ------ --------------------- - --- - --------------------------- ------------- -------------- ------- - ------------------- -- -- - ---展开代码
在这个例子中，getValue 函数返回一个需要 1 秒后才能完成的 Promise。addOne 函数会将它的参数自增 1，并返回一个值为自增之后的结果的 Promise。
Promise.resolve 方法创建一个新的 Promise，并将它返回给调用者。getValue 函数作为一个参数被传递给 Promise.resolve 方法。Promise 将在下一个事件循环中执行异步代码，也就是调用 getValue 函数。
getValue 函数会在 1 秒后通过 resolve 方法传递一个值 1 给新创建的 Promise，并在控制台输出 getValue resolved。
Promise.then 方法会将 addOne 函数作为一个参数传递给它。Promise 将在下一个事件循环中执行异步代码，也就是调用 addOne 函数。
addOne 函数将参数自增 1，并通过 Promise.resolve 方法创建一个新的 Promise，这个 Promise 的值为自增之后的结果。Promise.then 方法接收到这个 Promise，然后将它传递给下一个 then 方法。
最后一个 then 方法接收到值为 2 的参数，并在控制台输出该值。
注意事项
在使用 Promise 时，还需要注意以下几点：
- Promise 执行 once，即一个 Promise 对象只能执行一次，之前的结果状态不可修改。
- Promise 一旦进入 resolved 或 rejected 状态后，后续 then 或 catch 方法将会立即执行。
- 任何情况下，Promise 都只能通过 resolve 和 reject 方法来改变状态。
结语
在本文中，我们详细解析了 Promise 中异步函数的返回值问题，并说明了异步函数的调用时机和链式调用。通过深入掌握这些知识，我们可以更好地理解和使用 Promise，并减少可能出现的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cf0f24e46428fe9e9ef83f
