promise解决回调地狱相关

梦里梦外; 2023-06-09 14:30 89阅读 0赞

## 回调地狱 ##

回调地狱指多个回调函数嵌套  
*还记得**回调函数**吗?* 就是调用自身啊  
下面用代码解释写法繁琐但写法合法的回调地狱 :

首先创建三个json文件 : a.json   b.json   c.json
    内容分别为 : { "aa" : "hello"}	{ "bb" : "world"}	{ "cc" : "html"}
    $.ajax({ 
        url:"a.json",
        dataType:"json",
        success(data){ 	//请求到a的数据之后再去请求b的数据
            $.ajax({ 
                url:"b.json",
                dataType:"json",
                success(data){ 	//请求到b的数据之后，再去请求c的数据
                    $.ajax({ 
                        url:"c.json",
                        dataType:"json",
                        success(data){ 
                           console.log(data); //{cc : "html"}
                        }
                    })
                }
            })
        }
    })

## Promise对象 ##

Promise对象主要把回调函数嵌套的写法变成链式写法

Promise对象里放的是异步操作的代码，异步操作的代码的状态会从等待状态变为成功状态或者是失败状态，当他的状态发生改变的时候就会触发.then方法，.then方法里有两个函数，第一个是成功的函数，第二个是失败的函数

**jq的 $.ajax返回的本身就是一个promise对象，可以直接调用then方法，假设$.ajax返回的不是promise的话我们需要自己new Promise方法 ，才能调用then方法**

(1) 一个ajax请求的时候

// 原生的写法
    function js_pro(url) { 
        return new Promise(function (resolve, reject) { 
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
            xhr.send();
            xhr.onreadystatechange = function () { 
                if (xhr.readyState == 4) { 
                    if (xhr.status == 200) { 
                        var data = xhr.responseText;
                        resolve(data);
                    } else { 
                        reject("404");
                    }
                }
            }
        })
    }
    js_pro("a.json").then(res=>{ 
        delDate(res);	//成功的回调函数中可以使用封装函数
    },res=>{ 
    
    })
    function delDate(data){ 
        console.log(data);	// {aa : "hello"}
    }
    
    //jq写法
    function jq_pro(url,data){ 
        return $.ajax({ 
            url,
            data,
            dataType:"json",
        })
    }
    jq_pro("a.json").then(res=>{ 
        delDate(res);
    },res=>{ 
    
    })

(2) 多个ajax请求的时候 ( 回调地狱 ) , 返回新的promise实例 , 可以链式调用

// 原生的写法
    function js_pro(url) { 
        return new Promise(function (resolve, reject) { 
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
            xhr.send();
            xhr.onreadystatechange = function () { 
                if (xhr.readyState == 4) { 
                    if (xhr.status == 200) { 
                        var data = xhr.responseText;
                        resolve(data);
                    } else { 
                        reject("404");
                    }
                }
            }
        })
    }
    js_pro("a.json").then(res=>{ 
        return js_pro("b.json");
    }).then(res=>{ 
        return js_pro("c.json");
    }).then(res=>{ 
        console.log(data);	//{cc : "html"}
    })
    
    //jq写法
    function jq_pro(url,data){ 
        return $.ajax({ 
            url,
            data,
            dataType:"json",
        })
    }
    jq_pro("a.json").then(res=>{ 
        return jq_pro("b.json");
    }).then(res=>{ 
        return jq_pro("c.json");
    }).then(res=>{ 
        console.log(data);	//{cc : "html"}
    })

(3) 多个ajax请求的时候 ( 互相没有关系 ) **Promise.all**

当页面中有多个ajax请求，而且他们之间没有关系，就可以用promise.all发送多个promise异步操作 , 只有这多个异步请求全都成功了才会执行then方法

function jq_pro(url,data){ 
        return $.ajax({ 
            url,
            data,
            dataType:"json"
        })
    }
    Promise.all([
        jq_pro("a.json"),
        jq_pro("b.json"),
        jq_pro("c.json")
    ]).then(res=>{ 
        console.log(res);	//[{aa:"hello"},{bb:"world"},{cc:"html"}]
    })

**Promise . race** 请求多个promise , 只要有一个响应成功了就会触发.then

Promise.race([
    	jq_pro("a.json"),
    	jq_pro("b.json"),
    	jq_pro("c.json")
    ]).then(res=>{ 
        console.log(res);	//{aa:"hello"}或{bb:"world"}或{cc:"html"}看哪个json文件先响应
    })

## promise的错误处理有两种写法： ##

1.  then 方法里放两个函数 , 第一个是成功的回调 , 第二个是失败的回调
2.  then 方法里放成功的回调，继续.catch放失败的回调 jq 的 ajax 比较特殊，因为他是自己已经封装好的promise对象，catch的写法变成了fail

**catch会捕捉到错误 , 之后的代码不执行**

(1) 一个ajax的错误处理

// jq写法
    function jq_pro(url,data){ 
       return $.ajax({ 
           url,
           data,
           dataType:'json'
       })
    }
    jq_pro("a.json").then(res=>{ 
    	console.log(res);
    }).fail(res=>{ 
        console.log(res);
    })
    // js写法
    function js_pro(url) { 
        return new Promise(function (resolve, reject) { 
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
            xhr.send();
            xhr.onreadystatechange = function () { 
                if (xhr.readyState == 4) { 
                    if (xhr.status == 200) { 
                        var data = xhr.responseText;
                        resolve(data);
                    } else { 
                        reject("404");
                    }
                }
            }
        })
    }
    js_pro("a.json").then(res=>{ 
    	console.log(res);
    }).catch(res=>{ 
        console.log(res);
    })

(2) 多个ajax回调地狱的错误处理

js_pro("a.json").then(res=>{ 
        return js_pro("b.json");
    }).then(res=>{ 
        return js_pro("c.json");
    }).then(res=>{ 
        console.log(res);
    }).catch(res=>{ 
        console.log(res);
    })

(3) 多个ajax没有关系

Promise.all([
       js_pro("a.json"),
       js_pro("b.json"),
       js_pro("c.json")
    ]).then(res=>{ 
       console.log(res);
    }).catch(res=>{ 
       console.log(res);
    })