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 / 8 / 30
