JavaScript Promise 怎么用

你有没有过这样的经历：刷短视频时，点了“播放”按钮，不是立刻就出画面，而是先转个圈——这就是“等加载”；逛外卖APP，下单后不是瞬间收到餐品，而是要等商家接单、骑手取餐配送——这也是“等流程”。生活里这种“需要等一会儿才出结果”的事，放到编程里也特别常见。比如你要让电脑“等”一张图片加载完成，再做下一步操作，或者“等”服务器传回数据，再显示到页面上，这时候JavaScript里的“Promise”就派上用场了。

可能有人会觉得“Promise”是个高大上的专业词，其实你把它当成一个“待办的承诺”就好。比如你跟朋友约了“下午3点见”，这就是一个承诺：如果朋友准时到，就是“承诺成功”；如果朋友临时爽约，就是“承诺失败”；而在等3点的这段时间，就是“待处理中”。用编程的话讲，Promise就是专门用来处理这种“需要等待的任务”，它有三种状态：待处理（pending）、成功（fulfilled）、失败（rejected），而且状态一旦从待处理变了，就再也不会变——比如朋友不会突然从“爽约”变回“准时到”。

那怎么用这个“承诺”呢？我们用最生活化的例子来拆解，就说“点外卖等餐”：你打开外卖APP选好餐，点击“下单”，这就相当于创建了一个Promise承诺。代码里会写成这样：

`

const waitForFood = new Promise(function(resolve, reject) {

// 这里是要等的任务：商家接单后做餐、骑手配送

const foodPrepared = true; // 假设商家顺利做好了餐

const riderGotFood = true; // 假设骑手顺利取到了餐

// 结果出来了，就调用resolve（成功），否则调用reject（失败）

if (foodPrepared && riderGotFood) {

resolve("外卖到啦！"); // 成功的话，会把结果传进去

} else {

reject("抱歉，餐品出问题了"); // 失败的话，把错误信息传进去

}

});

`

这里的resolve和reject就是Promise内置的两个“开关”：任务成功就开resolve，失败就开reject，把结果或者错误信息带出来。

创建了承诺，接下来就是“等结果出来后做什么”——这就要用到Promise的两个方法：.then()和.catch()。还是用外卖的例子：外卖到了就开开心心拆餐，出问题了就赶紧找客服。代码里就是：

`

waitForFood

.then(function(successMsg) {

// 承诺成功时执行

console.log(successMsg); // 输出“外卖到啦！”

// 你可以在这里写“拆餐、吃饭”的后续操作

})

.catch(function(errorMsg) {

// 承诺失败时执行

console.error(errorMsg); // 输出“抱歉，餐品出问题了”

// 你可以在这里写“申请退款、重新下单”的补救操作

});

`

是不是很简单？.then()就是“成了之后做的事”，.catch()就是“砸了之后做的事”，完全对应生活里的反应。

可能有人会问，为什么不直接按顺序写代码，比如“先等餐做好，再等骑手取餐，最后显示到页面”？这就像你写作业，非要等所有步骤都做完才动笔，而Promise的好处是“不用卡死整个流程”：你可以同时做别的事，等承诺完成了再处理结果。比如你在等外卖的同时，可以先刷会儿短视频，不用盯着APP等——这就是Promise让代码更灵活的地方，也是它在网页开发里特别常用的原因，毕竟现在网页上的加载、数据请求，几乎都是“要等一下”的任务。

最后再提一句常见的小误区：有人会把Promise写得太复杂，其实不用。只要记住“承诺=待处理的任务，处理成功走.then，失败走.catch”，再结合生活里的例子，就能轻松用起来。下次再遇到网页上“加载中”的提示，不妨想想，背后可能就是一个小小的Promise在“等数据、等图片”，是不是突然觉得它没那么难了？