问题描述
在前端开发中，我们经常需要使用到 Promise 进行异步编程，以保证代码的执行顺序和状态的正确性。但有时我们会发现 Promise 的代码执行顺序不如我们预期，这会导致程序的错误或者不可预期的行为。比如下面这个例子：
const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
promise1.then(value => console.log(value));
promise2.then(value => console.log(value));
console.log("Done");我们期望的输出是：
1 2 Done
但实际输出却是：
Done 1 2
这是因为 Promise 的执行是异步的，而 console.log("Done") 语句是在两个 Promise 的 then 函数之前执行的，导致了输出顺序的不一致。
解决方案
要解决这个问题，我们可以使用链式调用的方式来组织 Promise 的执行顺序。具体来讲，在第一个 Promise 的 then 函数中返回第二个 Promise，然后在第二个 Promise 的 then 函数中执行需要的操作。修改上面的例子：
-- -------------------- ---- -------
----- -------- - -------------------
----- -------- - -------------------
------------------- -- -
-------------------
------ ---------
------------- -- -
-------------------
--------------------
---这个代码输出的结果符合我们的预期。
我们也可以使用 async/await 来优雅地解决这个问题。修改上面的例子：
-- -------------------- ---- -------
----- -------- -------- -
----- -------- - -------------------
----- -------- - -------------------
----------------- ----------
----------------- ----------
--------------------
-
---------这个代码与我们期望的输出一致。使用 async/await 可以使代码更加简洁明了，而且避免了回调地狱的问题。
结论
在使用 Promise 进行异步编程时，需要注意代码的执行顺序。通过链式调用和 async/await 可以避免代码执行顺序不如预期的问题，使代码更加直观和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704850cd91dce0dc84f20e5