解决回调地狱(promise)

解决回调地狱

多重ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
--------------------
<button>发送一堆ajax</button>
function sendMsg(url, callback) {
//ajax
var xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//响应回来,请求1.json
alert(xhr.responseText);
//请求2.json
//后续操作,2||3||4.json,该事宜会发生改变
callback(); //你传递的后续要做的事情
}
}
xhr.send();
}
document.querySelector('button').onclick = function() {
// sendMsg('./1.json');
// sendMsg('./2.json');
// sendMsg('./3.json');
// sendMsg('./4.json');
// sendMsg('./1.json');
// sendMsg('./2.json');
// sendMsg('./3.json');
// sendMsg('./4.json');
// 理论上请求挨个出去,但是,响应回来的速度,不一定,此时就会出现响应顺序不一致的情况
//万恶的回调函数地狱,可维护性差
sendMsg('./1.json', function() {
sendMsg('./2.json', function() {
sendMsg('./3.json', function() {
sendMsg('./1.json', function() {
sendMsg('./2.json', function() {
sendMsg('./3.json', function() {
console.log('完成了');
});
});
})
});
});
});
}

promise

  • promise是一个容器,用来管理异步流程,执行的过程中,
  • 通过函数调用,记录住执行成功与否的状态,成功->then,失败->catch
  • 保证顺序执行的then回调函数中,记得return 一个promise对象
  • promise三种状态: pendding(待发) 没有调用reject或者resolve的时候
  • resolved(fulilled) 已解决已满足 调用了resolve后的状态
  • rejected 已拒绝 调用reject函数后的状态
  • 一经改变,无法回退、也不可以暂停

每一个new Promise中包含着要么成功,要么失败的后续标识
每一个promise对象都可以.then函数来获取成功后的操作
每一个promise对象也可以.catch函数来获取失败后的操作

new Promise接受的参数是一个函数
该函数的参数中,1:成功 2:失败
成功(resolve)和失败(reject)也是函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<button>发送一堆ajax</button>
-------------------------------------------------------------------------
function sendMsg(url, callback) {
var p = new Promise(function(resolve,reject){
//包含整件事的执行
var xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//成功后的操作
alert(xhr.responseText);
//调用成功函数,其实就是做一个标记,存储起来,未来该对象.then就能执行
resolve('牛逼了');
}
}
xhr.send();
});
return p;//返回p对象外部then||catch
}
document.querySelector('button').onclick = function() {
sendMsg('./1.json')
.then(function(data){
//成功后的回调函数
// console.log('1.json请求完成,成功!!!',data);
return sendMsg('./2.json');
})
.then(function(data){
return sendMsg('./3.json');
})
.then(function(data){
return sendMsg('./4.json');
})
.then(function(data){
return sendMsg('./1.json');
})
.then(function(data){
return sendMsg('./2.json');
})
.then(function(data){
return sendMsg('./3.json');
})
.then(function(data){
return sendMsg('./4.json');
})
.then(function(data){
console.log('结束了');
})
.catch(function(){ //一组promise对象,一个catch多个then
//失败的回调函数
});
}