PROMISE解决AJAX中的串行和并行

最新推荐文章于 2024-07-27 14:43:55 发布

一小池勺

最新推荐文章于 2024-07-27 14:43:55 发布

阅读量937

点赞数 16

文章标签： ajax okhttp android

本文链接：https://blog.csdn.net/zrblue/article/details/135317466

版权

解决AJAX回调地狱

AJAX 串行带来的回调地狱

PROMISE-THEN的链式写法优雅解决

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>解决AJAX的回调地狱</title>
</head>

<body>
    <script>
      /* PROMISE 对异步编程进行管理 */
        function queryBase() {
            return new Promise(resolve => {
                $.ajax({
                    url: '/baseTnfo?name=zrm',
                    success: result => {
                        resolve(result)
                    }
                })
            })
        }

        function queryScore(scoreId) {
            return new Promise(resolve => {
                $.ajax({
                    url: '/score?id=' + scoreId,
                    success: result => {
                        resolve(result)
                    }
                })
            })
        }

        function queryChinese(chinese) {
            return new Promise(resolve => {
                $.ajax({
                    url: '/paiming?chi=' + chinese,
                    success: result => {
                        resolve(result)
                    }
                })
            })
        }
      /* PROMISE 对异步编程进行管理 */

      /* then 链式写法 */
        queryBase().then(baseInfo => {
            let scoreId = baseInfo.scordId
            //=> THEN 方法中如果返回的是一个 PROMISE 实例，则当前返回实例的成功或者失败状态，影响着下一个THEN中哪个方法会被触发执行
            // 如果返回的是非PROMISE实例，则看当前方法执行是否报错，来决定下一个THEN中哪个方法执行
            return queryScore(scoreId)
        }).then(scoreInfo => {
            let chinese = scoreInfo.chinese
            return queryChinese(chinese)
        }).then(pai => {
            console.log(pai)
        })
      /* then 链式写法 */
    </script>
</body>

</html>

将上部分的链式写法，写得更优雅点

queryBase().then(baseInfo => queryScore(baseInfo.scordId))
.then(scoreInfo => queryChinese(scoreInfo.chinese))
.then(pai =>  console.log(pai))

解决AJAX中的并行

AJAX中的并行

let chi = 100,eng = 12, math = 100;
let chipaiming,engpaiming,mathpaiming;
let count = 0; // 计数器 累计 3 次后就执行一件事
function flag() {
   if(count >= 3){
      // 处理自己要做的事情
   }
}
/* 发送 3 次请求 */
$.ajax({
   url: 'paiming?chi=' + chi,
   success: result => {
      chipaiming = result
      count++
      flag()
   }
})
$.ajax({
   url: 'paiming?eng=' + eng,
   success: result => {
      engpaiming = result
      count++
      flag()
   }
})
$.ajax({
   url: 'paiming?math=' + math,
   success: result => {
      mathpaiming = result
      count++
      flag()
   }
})

Promise.all([promies1(),promise2(),promise3()])

ALL中存放的是多个PROMISE实例（每个实例管理着一个异步的操作），执行all方法返回的是一个新的PROMISE实例

当所有PROMISE实例的状态都为Fulfilled的时候（成功），让all返回的新的PROMISE实例的状态也改为Fulfilled，并且把所有PROMISE成功获取的结果，存储成为一个数组

结果数组中的顺序和写入all中的实例顺序一致，让all返回的新的PROMISE实例的VALUE值等于这个数组

都成功才会通知THEN中第一个方法执行，只要有一个失败，就会通知THEN中第二个方法执行（或则catch中的方法）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>解决AJAX并行</title>
</head>

<body>
    <script>
        /* PROMISE 对异步编程进行管理 */
        function ajax1() {
            return new Promise(resolve => {
                $.ajax({
                    url: '/api1',
                    success: result1 => {
                        resolve(result1)
                    }
                })
            })
        }

        function ajax2(scoreId) {
            return new Promise(resolve => {
                $.ajax({
                    url: '/api2',
                    success: result2 => {
                        resolve(result2)
                    }
                })
            })
        }

        function ajax3(chinese) {
            return new Promise(resolve => {
                $.ajax({
                    url: '/api3',
                    success: result3 => {
                        resolve(result3)
                    }
                })
            })
        }
        /* PROMISE 对异步编程进行管理 */
        Promise.all([ajax1(),ajax2(),ajax3()]).then(results => {
            // => results[result1,result2,result3]
        }).catch()
        /* Promise.all([promies1(),promise2(),promise3()]) */ 
    </script>
</body>

</html>

与Promise.all相对应的方法是Promise.race

它是看哪一个Promise状态先处理完（成功或则失败），以最先处理完的为主

Promise.race([ajax1(),ajax2(),ajax3()]).then(result => {})

谢谢款待

小记整理于 2023 / 12 / 31

一小池勺

关注

16
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
PROMISE解决AJAX中的串行和并行

当所有PROMISE实例的状态都为Fulfilled的时候（成功），让all返回的新的PROMISE实例的状态也改为Fulfilled，并且把所有PROMISE成功获取的结果，存储成为一个数组。//=> THEN 方法中如果返回的是一个 PROMISE 实例，则当前返回实例的成功或者失败状态，影响着下一个THEN中哪个方法会被触发执行。ALL中存放的是多个PROMISE实例（每个实例管理着一个异步的操作），执行all方法返回的是一个新的PROMISE实例。/* then 链式写法 */
复制链接

扫一扫