| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <script src="./js/ajax.js"></script>
- <script>
- // 回调地狱
- // ajax("GET","./data/a.json",function(res){
- // ajax("GET","./data/b.json",function(res){
- // ajax("GET","./data/c.json",function(res){
- // console.log("成功了",res);
- // })
- // })
- // })
- // Promise 解决回调地狱问题
- // 创建 Promise 实例 接收一个函数 函数内有两个参数 resolve 代表成功 reject 代表失败
- // 成功的效果 调用 then 方法
- // let p1 = new Promise((resolve,reject)=>{
- // ajax("GET","./data/a.json",function(res){
- // resolve(res);
- // })
- // });
- // // 只要promise 中执行了 resolve 方法 就可以通过 then 方法获取到成功的结果
- // p1.then(res=>{
- // console.log(res);
- // })
- // 失败的效果 调用 catch 方法
- // let p1 = new Promise((resolve,reject)=>{
- // ajax("GET","./data/a.json",function(res){
- // reject(res);
- // })
- // });
- // // 只要promise 中执行了 reject 方法 就可以通过 catch 方法获取到失败的结果
- // p1.catch(err=>{
- // console.log(err);
- // })
- // Promise.all 方法 同时执行多个 Promise 实例 等待所有 Promise 实例执行完成后 才调用 then 方法
-
- let p1 = new Promise((resolve,reject)=>{
- ajax("GET","./data/a.json",function(res){
- resolve(res);
- })
- })
- let p2 = new Promise((resolve,reject)=>{
- ajax("GET","./data/b.json",function(res){
- resolve(res);
- })
- })
-
- let p3 = new Promise((resolve,reject)=>{
- ajax("GET","./data/c.json",function(res){
- resolve(res);
- })
- })
- // Promise如果都成功就会执行 then 方法 如果有一个失败就会执行 catch 方法
- // Promise.all([p1,p2,p3]).then((res)=>{
- // console.log("全部成功",res);
- // }).catch((res)=>{
- // console.log("失败",res);
- // })
- // Promise.race() 只要第一个 Promise 实例执行成功 就会调用 then 方法 如果 Promise 实例执行失败 就会调用 catch 方法
- // Promise.race([p1,p2,p3]).then((res)=>{
- // console.log("成功",res);
- // }).catch((res)=>{
- // console.log("失败",res);
- // })
- </script>
- </body>
- </html>
|