Promise 常见使用场景

Promise 在日常开发中有非常多实用的场景。本页列举了最常见的几种模式，配合可运行的示例代码。

要点

掌握这些模式能帮助你更自如地处理异步逻辑，写出更清晰、更健壮的代码。

场景一：封装 AJAX 请求

Promise 最经典的用途——将回调风格的异步操作转为链式调用。

场景一：封装 AJAX 请求

示例代码

Loading...

场景二：异步操作超时控制

利用 Promise.race 实现超时中断。设定一个超时 Promise，与原任务竞争——任务先完成则正常返回，超时先到则拒绝。

场景二：异步操作超时控制

示例代码

Loading...

场景三：按顺序执行异步任务

通过 then 链将多个异步任务串行执行，前一个完成后再开始下一个。

场景三：按顺序执行异步任务

示例代码

Loading...

场景四：并发请求并合并结果

使用 Promise.all 同时发起多个请求，全部完成后合并结果。

场景四：并发请求并合并结果

示例代码

Loading...

场景五：异步重试机制

网络不稳定时自动重试，直到成功或达到最大重试次数。

场景五：异步重试机制

示例代码

Loading...

场景六：图片预加载

预先加载图片资源，确保渲染时能立即显示。

场景六：图片预加载

示例代码

Loading...

场景七：防抖异步操作

输入框搜索等场景中，快速连续输入时只触发最后一次请求。

场景七：防抖异步操作

示例代码

Loading...

场景八：缓存异步结果

对相同参数的异步调用做缓存，避免重复请求。

场景八：缓存异步结果

示例代码

Loading...