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处理原生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处理多个 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>

　　

结果：

结果分析：