文档介绍：Promise的基本使用:
利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;
通过new实例化Promise,  构造函数需要两个参数, 第一个参数为函数执行成功以后执行的函数resolve, 第二个函数为函数执行失败以后执行的函数reject:
new Promise(function(resolve , reject) {
});
通过Promise,我们把回调函数用线性的方式写出来,而不是一层套一层, 这个函数有四层回调;
fn("args", function(a) {
fn1("foo", function(b) {
fn2("bar", function(c) {
fn3("baz", function(d) {
alert("回调成功,获知的内容为:"+a+b+c+d)
})
})
})
})
以上的Demo只有包含成功的回调, 如果失败的回调也算的话, 也就更麻烦了;
如果使用Promise的方式,我们可以改装成线性的代码, 更加符合阅读的****惯,只要在then函数下写逻辑即可;
new Promise(function(resolve , reject) {
resolve(1);
}).then(function(val) {
(val);
return new Promise(function(resolve , reject) {
resolve(2);
});
}).then(function(val) {
(val);
return new Promise(function(resolve , reject) {
resolve(3);
});
}).then(function(val) {
(val);
return new Promise(function(resolve , reject) {
resolve(4);
});
}).then(function(val) {
(val);
});
这是一个ajax异步获取数据的例子, 我们使用了回调函数;
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var callback = function(res) {
(res);
};
var ajax = function(url, callback) {
var r = new XMLHttpRequest();
("GET", url, true);
= function () {
if ( != 4 || != 200) return;
var data = ();
callback(data);
};
();
};
//执行请求:
ajax("s=10&f={firstName}", callback);
//再做别的事情;
</script>
</body>
</html>
因为ES6内置了Promise, 我们可以把以上的callback改写成promise的方式, 首先ajax函数返回一个Promise对象;
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var callback = function(res) {
(res);
};
var ajax = function(url) {
return new Promise(function(resolve, reject) {
var r = new XMLHttpRequest();
("GET", url, true);
= function () {
if ( != 4 || != 200) return;
var data = ();
resolve(data);
};
();
})
};
//执行请求:
ajax