小橙子

前端

47
文章
37
分类
19
标签

解决回调地狱（promise）

ES6

解决回调地狱

多重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
             //失败的回调函数
         });
    }