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