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

目录
相关文章
|
前端开发
用Promise对象实现的 Ajax
用Promise对象实现的 Ajax
73 0
|
设计模式 前端开发 JavaScript
AJAX中的串行与并行
AJAX中的串行与并行
78 0
|
前端开发 Java
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例
127 0
|
前端开发 API
用promise封装ajax
用promise封装ajax
74 0
|
前端开发 JavaScript API
Promise封装Ajax请求
Promise封装Ajax请求
93 0
|
设计模式 前端开发 JavaScript
AJAX中的串行与并行
我们来一起走进回调地狱,是谁的地狱呢?是AJAX的!
74 0
AJAX中的串行与并行
|
存储 前端开发
Promise 解决AJAX中的串行并行
Promise 是个好东西!
128 0
kde
|
5天前
|
JSON Linux 数据格式
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
2974 7
|
5天前
|
JavaScript Ubuntu IDE
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
553 0
|
8天前
|
人工智能 定位技术 API
Dify MCP 保姆级教程来了!
大语言模型,例如 DeepSeek,如果不能联网、不能操作外部工具,只能是聊天机器人。除了聊天没什么可做的。
810 9