Promise 概述
Promise 是 ES6 中新增的
异步编程 解决方案, 在代码中的表现是一个对象
假设我现在有这么一个需求, 从网络上加载 3 个资源, 要求加载完资源1, 才能加载资源2, 加载完资源2, 才能加载资源3，前面任何一个资源加载失败, 后续资源都不加载。
<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 相关的语法和含义。
<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 的语法之后在浏览器当中运行的效果依然是和如上第一版是一样的：
