promise处理回调地狱

promise

异步调用

异步结果分析

  1. 定时任务

  2. ajax

  3. 自定义事件函数

多次异步调用依赖分析(promise 应用场景)

  1. 多次异步调用结果顺序不确定问题

    $.ajax({
                url: ‘http:localhost:3000/data1‘,
                success: data => {
                    console.log(data)
                }
            })
            $.ajax({
                url: ‘http:localhost:3000/data2‘,
                success: data => {
                    setTimeout(()=>{
                        console.log(data)
                    },2000)
                }
            })
            $.ajax({
                url: ‘http:localhost:3000/data3‘,
                success: data => {
                    console.log(data)
                }
            })

    输出结果111,333,三秒之后出现 222

  2. 异步调用结果存在依赖需要嵌套,造成回调地狱问题

    $.ajax({
                url: ‘http:localhost:3000/data1‘,
                success: data => {
                    console.log(data)
                    $.ajax({
                        url: ‘http:localhost:3000/data2‘,
                        success: data => {
                            setTimeout(() => {
                                console.log(data)
                                $.ajax({
                                    url: ‘http:localhost:3000/data3‘,
                                    success: data => {
                                        setTimeout(()=>{
                                            console.log(data)
                                            //...
                                        },1000)
                                    }
                                })
                            }, 1000)
                        }
                    })
                }
            })

    此时解决了顺序问题,但是形成了回调地狱,输出结果 111,222(1s),333(1s)

使用promise的主要好处

  1. 可以避免多层异步嵌套问题(回调地狱)

  2. promise 提供了简洁的api,使得控制异步操作更加容易

简单的异步任务

new Promise((resolve, reject) => {
            //实现异步任务
            setTimeout(() => {
                let flag = false //true,输出 Hello,false,输出 error
                if (flag) return resolve(‘hello‘)
                reject(‘error‘)
            }, 1000)
        })
            .then(data => {
                //接收异步任务的成功(resolve)结果
                console.log(data)
            }, info => {
                //接收异步任务的失败(reject)结果
                console.log(info)
            })

promise处理回调地狱

promise处理原生ajax请求(单个)

<script>
        function queryData(url) {
            let p = new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest()
                xhr.onreadystatechange = () => {
                    if (xhr.readyState != 4) return
                    if (xhr.readyState = 4 && xhr.status == 200) {
                        resolve(xhr.responseText)
                    } else {
                        reject(‘server error‘)
                    }
                }
                xhr.open(‘get‘, url);
                xhr.send(null);
            })
            return p
        }
        queryData(‘http:localhost:3000/data‘) //当前接口中没有 data 这个接口,输出 server error
        .then((data)=>{
            //接收resolve的结果
            console.log(data)
        },(err)=>{
            //接收reject的结果
            console.log(err)
        })
    </script>

请求失败:

promise处理回调地狱

请求成功:

promise处理回调地狱

promise处理多个 ajax 请求

<script>
        //promise处理原生ajax请求
        function queryData(url) {
            let p = new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest()
                xhr.onreadystatechange = () => {
                    if (xhr.readyState != 4) return
                    if (xhr.readyState = 4 && xhr.status == 200) {
                        resolve(xhr.responseText)
                    } else {
                        reject(‘server error‘)
                    }
                }
                xhr.open(‘get‘, url)
                xhr.send(null)
            })
            return p
        }
?
        queryData(‘http://localhost:3000/data‘) //返回了一个新的promise对象  p1
            .then((data) => {   //相当于 p1.then
                console.log(data)
                return queryData(‘http://localhost:3000/data2‘) //返回了一个新的promise对象  p2
            }, (err) => {
                return ‘error1‘
            })
            .then((data) => {   //相当于 p2.then
                console.log(data)
                return queryData(‘http://localhost:3000/data3‘) //返回一个新的promise对象  p3
            }, (err) => {
                return ‘error2‘
            })
            .then((data) => {   //相当于 p3.then
                console.log(data)
            }, (err) => {
                return ‘error3‘
            })
?
    </script>

结果:

 promise处理回调地狱

结果分析:

 promise处理回调地狱

相关推荐