Promise基本概念
Promise 概述
Promise 是 ES6 中新增的
异步编程解决方案, 在代码中的表现是一个对象
假设我现在有这么一个需求, 从网络上加载 3 个资源, 要求加载完资源1, 才能加载资源2, 加载完资源2, 才能加载资源3，前面任何一个资源加载失败, 后续资源都不加载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
function request(fn) {
setTimeout(function () {
fn("拿到的数据");
}, 1000);
}
request(function (data) {
console.log(data, 1);
request(function (data) {
console.log(data, 2);
request(function (data) {
console.log(data, 3);
});
});
});
</script>
</head>
<body>
</body>
</html>
那么博主的第一版实现代码就出来了，然后在浏览器当中的运行效果也是正如所意的，如下：
Promise 的作用
企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数 层层嵌套，如果回调函数嵌套的层数太多, 就会导致代码的阅读性, 可维护性大大降低, Promise 对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套(回调地狱)。这里博主先简单的使用一下不进行深度的介绍，下一篇文章当中博主在详细的进行介绍 Promise 相关的语法和含义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
function request() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("拿到的数据");
}, 1000);
});
}
request().then(function (data) {
console.log(data, 1);
return request();
}).then(function (data) {
console.log(data, 2);
return request();
}).then(function (data) {
console.log(data, 3);
});
</script>
</head>
<body>
</body>
</html>
当然博主改造为 Promise 的语法之后在浏览器当中运行的效果依然是和如上第一版是一样的：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具