解决回调地狱的方法

1.promise(resolve,reject)—将函数的状态暂停/凝固，函数调用的时候不会马上触发

Promise实现原理

  1. 我们使用promise的时候会将函数的状态暂停/凝固 ，promise函数调用的时候不会马上触发
  2.  new Promise
  3. 1.使用new 关键字实现promise
  4. 2.promise有两种状态resolve,reject
  5. 3.promise函数不会马上触发，要通过一个then函数去触发
  6. 4.then触发的是resolve的状态，catch触发reject的状态
  7.   resolve  --->成功   --then
  8.   reject   --->失败   --catch
  1. function go(){
  2.   return new Promise((resolve,reject)=>{
  3.     resolve(1);
  4.     reject(2);
  5.   })
  6. }
  7. go().then(res=>{
  8.   console.log(res)
  9. }).catch(err=>{
  10.   console.log(err)
  11. })

例子

  1. /* 回调函数是一个异步处理过程 */
  2. var p=new Promise((resolve,reject)=>{
  3.   resolve("success");
  4.   rejecet("失败");
  5. })
  6. p.then(res=>{
  7.   console.log(res)  //success
  8. })
  9. console.log("4")
  10. //输出结果:
  11.      4
  12.    success

2.封装promise

  1.  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  1. <script>
  2.       function http(){
  3.       return new Promise((resolve,reject)=>[
  4.         $.ajax({
  5.           url:"https://music.aityp.com/top/playlist?cat=华语",
  6.           type:"get",
  7.           success:res=>{
  8.             resolve(res)
  9.           },
  10.           error:err=>{
  11.             reject(err)
  12.           }
  13.         })
  14.         })
  15.     }
  16.     http().then(res=>{
  17.       console.log(res)
  18.     })
  19. </script>

例子—网易云音乐

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. <script src="lib/http-promise.js"></script>

lib/http-promist.js

  1. var baseUrl="https://music.aityp.com/";
  2. function http(url){
  3.     return new Promise((resolve,reject)=>{
  4.         $.ajax({
  5.             url:baseUrl+url,
  6.             type:"get",
  7.             success:res=>{
  8.                 resolve(res)
  9.             },
  10.             error:err=>{
  11.                 reject(err)
  12.             }
  13.         })
  14.     })
  15. }
  1. /*使用promise之后将http请求由纵向的变为横向的了*/
  2. http("top/playlist?cat=华语").then(res=>{
  3.   let id=res.playlists[0].id;
  4.   return id
  5. }).then(res=>{
  6.   http(`playlist/detail?id=${res}`).then(res=>{
  7.     let id=res.playlist.trackIds[0].id;
  8.     return id
  9.   }).then(res=>{
  10.     http(`song/url?id=${res}`).then(res=>{
  11.       console.log(res)
  12.     })
  13.   })
  14. })

ajax就是一个promise

  1.  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  1. var url="https://music.aityp.com/top/playlist?tag=华语";
  2. var ajax=$.ajax({url,type:"get"})
  3. console.log(ajax)
  4. ajax.then(res=>{
  5.   console.log(res)
  6. })