本文深入探讨javascript promise的正确使用方法，解决promise未进入`.then()`回调的常见问题。我们将阐述`new promise`构造函数中`resolve`和`reject`的重要性，并指导如何利用现有promise进行链式调用或采用`async/await`语法简化异步流程，从而构建健壮且易于维护的异步代码。
在现代JavaScript开发中，Promise是处理异步操作的核心机制。然而，不正确的Promise构造和使用方式常常会导致代码行为与预期不符，例如Promise始终不进入其.then()回调。本文将详细解析这类问题的原因，并提供专业的解决方案和最佳实践。
理解Promise的核心机制：resolve与reject
new Promise()构造函数接收一个“执行器”（executor）函数作为参数，该执行器函数又接收两个参数：resolve和reject。这两个函数是Promise生命周期中至关重要的控制点。resolve用于将Promise的状态从“待定”（pending）转换为“已完成”（fulfilled），并传递一个值；reject则用于将Promise的状态从“待定”转换为“已拒绝”（rejected），并传递一个错误原因。
问题根源：未调用resolve或reject
当一个Promise被创建后，如果其执行器函数中没有调用resolve或reject，那么这个Promise将永远保持“待定”状态。这意味着任何附加在其上的.then()或.catch()回调都将永远不会被执行。
立即学习“Java免费学习笔记（深入）”；
考虑以下示例代码中的错误模式：
new Promise(function () { updateToDefaultLayerSetting(); // 异步操作，但Promise本身未被resolve}).then(function() { // 这段代码永远不会执行});
在这个例子中，new Promise的执行器函数只调用了updateToDefaultLayerSetting()，但并没有显式地调用resolve()或reject()。因此，这个Promise将永远处于待定状态，其后的.then()回调自然无法触发。
正确构造Promise的示例
如果确实需要从头创建一个Promise来包装一个基于回调的异步操作，务必调用resolve或reject：
function wrapCallbackBasedFunction() { return new Promise((resolve, reject) => { // 模拟一个异步操作 setTimeout(() => { const success = Math.random() > 0.5; if (success) { resolve('操作成功！'); // 成功时调用resolve } else { reject('操作失败！'); // 失败时调用reject } }, 1000); });}wrapCallbackBasedFunction() .then(result => console.log(result)) .catch(error => console.error(error));
优化Promise使用：链式调用与async/await
在许多情况下，我们不需要手动创建new Promise，因为我们正在使用的函数（例如async函数或某些库的API）本身就返回Promise。在这种情况下，正确的做法是利用Promise的链式调用能力或使用更现代的async/await语法。
1. 利用Promise链式调用（.then()）
当一个函数返回Promise时，可以直接在其结果上调用.then()来处理其解析值。.then()本身也会返回一个新的Promise，这使得我们可以轻松地进行链式操作，将多个异步步骤串联起来。
以下是loadBasemap函数使用.then()进行重构的示例：
function loadBasemap(layers) { if (LayerSettings && LayerSettings.hasOwnProperty("basemap") && LayerSettings.basemap.hasOwnProperty("baseMapLayers")) { // updateToDefaultLayerSetting() 是一个async函数，它本身就返回一个Promise return updateToDefaultLayerSetting().then(function () { // 在updateToDefaultLayerSetting完成之后，创建并返回Map对象 // 这个Map对象将作为loadBasemap返回的Promise的解析值 return new Map({ basemap: Basemap.fromJSON(LayerSettings.basemap), layers: layers, }); }); } else { // 处理else分支，可能返回一个已解析的Promise或拒绝的Promise return Promise.resolve(null); // 示例：返回一个解析为null的Promise }}
在上述代码中，updateToDefaultLayerSetting()是一个async函数，它天然地返回一个Promise。我们直接在其结果上调用.then()，并在回调函数中返回新的Map对象。这个Map对象将成为loadBasemap函数最终返回的Promise的解析值。
2. 使用async/await简化异步流程
async/await是ES2017引入的语法糖，它建立在Promise之上，旨在使异步代码看起来和行为更像同步代码，从而提高可读性和可维护性。
以下是loadBasemap函数使用async/await进行重构的示例：
async function loadBasemap(layers) { if (LayerSettings && LayerSettings.hasOwnProperty("basemap") && LayerSettings.basemap.hasOwnProperty("baseMapLayers")) { // await会暂停当前async函数的执行，直到其后的Promise解决 await updateToDefaultLayerSetting(); // Promise解决后，继续执行后续代码 return new Map({ basemap: Basemap.fromJSON(LayerSettings.basemap), layers: layers, }); } else { // 处理else分支 return null; // 示例：直接返回null，async函数会将其包装成一个已解析的Promise }}
使用async/await，代码流程变得更加直观。await updateToDefaultLayerSetting()会等待updateToDefaultLayerSetting函数返回的Promise解析，然后才执行下一行代码。整个async函数会隐式地返回一个Promise，其解析值就是函数最终返回的值（这里是new Map(…)或null）。
重构actionDefaultBasemap及其它异步函数
actionDefaultBasemap函数也存在类似的问题：不必要地创建new Promise，并且没有正确地处理其内部异步操作的解析。
原始代码：
function actionDefaultBasemap() { let portalA = new Portal(portalConfig); new Promise(function () { // 再次创建了一个未被resolve的Promise portalA.load().then(function () { defaultBasemap = portalA.useVectorBasemaps ? portalA.defaultVectorBasemap : portalA.defaultBasemap; }).then(function () { // ... 更新LayerSettings }); }) return new Promise((resolve, reject) => resolve(defaultBasemap)); // 返回了一个立即resolve的Promise，但defaultBasemap可能还未被赋值}
这个函数存在两个主要问题：
内部的new Promise(function() { … })同样没有调用resolve或reject，导致其内部的.then()链虽然会执行，但整个new Promise外部包装器是无效的。函数最后返回的new Promise((resolve, reject) => resolve(defaultBasemap))是一个立即解析的Promise。然而，defaultBasemap的赋值是在portalA.load()的.then()回调中进行的，这是一个异步操作。这意味着在return new Promise(…)执行时，defaultBasemap很可能还是其初始值（undefined），而不是异步获取到的值。
重构actionDefaultBasemap的建议
应始终基于已有的Promise进行操作，并确保最终返回的Promise能够正确地反映所有异步操作的结果。
使用.then()链式调用重构：
function actionDefaultBasemap() { let portalA = new Portal(portalConfig); // portalA.load() 返回一个Promise，直接在其上进行链式操作 return portalA.load().then(function () { defaultBasemap = portalA.useVectorBasemaps ? portalA.defaultVectorBasemap : portalA.defaultBasemap; // 返回一个Promise，表示defaultBasemap赋值完成后的操作 // 如果这里没有其他异步操作，可以直接返回一个值，它会被包装成Promise if (LayerSettings.basemap.baseMapLayers[0].hasOwnProperty('url') && typeof defaultBasemap.resourceInfo !== "undefined") { LayerSettings.basemap.baseMapLayers[0].id = defaultBasemap.resourceInfo.data.baseMapLayers[0].id; LayerSettings.basemap.baseMapLayers[0].title = defaultBasemap.resourceInfo.data.baseMapLayers[0].title; LayerSettings.basemap.baseMapLayers[0].url = defaultBasemap.resourceInfo.data.baseMapLayers[0].url; } return defaultBasemap; // 返回最终需要的值 });}
使用async/await重构：
async function actionDefaultBasemap() { let portalA = new Portal(portalConfig); await portalA.load(); // 等待portalA加载完成 defaultBasemap = portalA.useVectorBasemaps ? portalA.defaultVectorBasemap : portalA.defaultBasemap; if (LayerSettings.basemap.baseMapLayers[0].hasOwnProperty('url') && typeof defaultBasemap.resourceInfo !== "undefined") { LayerSettings.basemap.baseMapLayers[0].id = defaultBasemap.resourceInfo.data.baseMapLayers[0].id; LayerSettings.basemap.baseMapLayers[0].title = defaultBasemap.resourceInfo.data.baseMapLayers[0].title; LayerSettings.basemap.baseMapLayers[0].url = defaultBasemap.resourceInfo.data.baseMapLayers[0].url; } return defaultBasemap; // async函数会将其包装成一个Promise}
注意事项：
避免不必要的new Promise： 如果你已经有一个Promise，不要再用new Promise去包装它。直接使用.then()或await。确保resolve或reject被调用： 如果你确实需要使用new Promise，请确保在其执行器函数中，resolve或reject至少有一个会被调用，以改变Promise的状态。错误处理： 在Promise链中，使用.catch()来集中处理错误。对于async/await，使用try…catch块来捕获await操作可能抛出的错误。返回Promise： 任何执行异步操作的函数，如果其结果需要在将来被使用，都应该返回一个Promise（无论是显式地通过new Promise，还是隐式地通过async函数）。
总结
JavaScript Promise是异步编程的基石。解决Promise不进入.then()的问题，关键在于理解new Promise构造函数中resolve和reject的职责。更重要的是，在多数场景下，我们应该优先使用Promise的链式调用（.then()）或现代的async/await语法来管理异步流程，而不是反复创建新的Promise。通过遵循这些最佳实践，可以编写出更清晰、更健壮、更易于维护的异步JavaScript代码。
以上就是掌握JavaScript Promise：避免常见陷阱与高效异步编程实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540956.html
微信扫一扫 
支付宝扫一扫 
