promise处理回调地狱

Posted 2021-03-22 bulubulu-qy

promise

异步调用

异步结果分析

1. 定时任务

2. ajax

3. 自定义事件函数

多次异步调用依赖分析（promise 应用场景）

 

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

    1 $.ajax({
    2             url: ‘http:localhost:3000/data1‘,
    3             success: data => {
    4                 console.log(data)
    5             }
    6         })
    7         $.ajax({
    8             url: ‘http:localhost:3000/data2‘,
    9             success: data => {
   10                 setTimeout(()=>{
   11                     console.log(data)
   12                 },2000)
   13             }
   14         })
   15         $.ajax({
   16             url: ‘http:localhost:3000/data3‘,
   17             success: data => {
   18                 console.log(data)
   19             }
   20         })

    

   输出结果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,使得控制异步操作更加容易

简单的异步任务

 1 new Promise((resolve, reject) => {
 2             //实现异步任务
 3             setTimeout(() => {
 4                 let flag = false //true,输出 Hello，false,输出 error
 5                 if (flag) return resolve(‘hello‘)
 6                 reject(‘error‘)
 7             }, 1000)
 8         })
 9             .then(data => {
10                 //接收异步任务的成功(resolve)结果
11                 console.log(data)
12             }, info => {
13                 //接收异步任务的失败(reject)结果
14                 console.log(info)
15             })

 

 

 

 

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>

 

　　

 

结果：

 

 

 

 

结果分析：