Promise对象:代表了未来某个将要发生的事件(通常是一个异步操作)
好处:有了promise对象,可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(回调地狱)

1、promise原理

  1. promise有两种状态  成功/失败
  2.     resolve函数处理成功的情况
  3.   reject函数处理失败的情况
  1. <script>
  2.         //1、什么？  promise监听器
  3.         //2、new关键字实现promise
  4.         //3、传递两个参数 
  5.         // resolve(处理成功)  then 触发reslove
  6.         // reject(处理失败)   catch函数触发reject
  7.         //4、这两个函数不会马上执行  
  8.         // len 和 catch 只会触发一个
  9.         var p = new Promise((resolve,reject)=>{
  10.            //resolve("success");
  11.             reject("error")
  13.         })
  14.         console.log(p);
  15.         // p.then(res=>{
  16.         //     console.log(res);
  17.         // })
  18.         p.catch(res=>{
  19.             console.log(res);
  20.         })
  21.     </script>

2 、回调地狱

两段http请求存在高度依赖、嵌套的关系 就会造成回调地狱

  1. <body>
  2.     <p id="name"></p>
  3.     <img src="" alt="" id="img">
  4.     <p id="detail"></p>
  5.     <script>
  6.         var url = `http://47.108.197.28:3000/top/playlist`;
  7.         $.ajax({
  8.             url,
  9.             success:res=>{
  10.                 var {name,id,coverImgUrl}  = res.playlists[0];
  11.                 $("#name").html(name);
  12.                 $("img").attr("src",coverImgUrl)
  13.                 // 获取歌曲详情相关数据
  14.                 var url = `http://47.108.197.28:3000/top/playlist?id=${id}`
  15.                 $.ajax({
  16.                     url,
  17.                     success:res=>{
  18.                         console.log((res.playlists[0].description));
  19.                         var detail = res.playlists[0].description;
  20.                         $("#detail").html(detail)
  21.                     }
  22.                 })
  23.             }
  24.         })
  25.     </script>
  26. </body>