PROMISE解决AJAX中的串行和并行

简介: PROMISE解决AJAX中的串行和并行

解决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

目录
相关文章
|
3月前
|
设计模式 前端开发 JavaScript
AJAX中的串行与并行
AJAX中的串行与并行
26 0
|
4月前
|
前端开发 Java
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
34 0
|
4月前
|
前端开发 API
用promise封装ajax
用promise封装ajax
25 0
|
5月前
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
28 0
|
8月前
|
设计模式 前端开发 JavaScript
AJAX中的串行与并行
我们来一起走进回调地狱,是谁的地狱呢?是AJAX的!
39 0
AJAX中的串行与并行
|
8月前
|
存储 前端开发
Promise 解决AJAX中的串行并行
Promise 是个好东西!
83 0
|
9月前
|
XML JSON 前端开发
Ajax、Promise、Axios前端三剑客
Ajax、Promise、Axios前端三剑客
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
14 1
|
1月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
21 4
|
26天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。