8.1 Promise

解决回调地狱的方法

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

Promise实现原理

我们使用promise的时候会将函数的状态暂停/凝固 ，promise函数调用的时候不会马上触发
 new Promise
1.使用new 关键字实现promise
2.promise有两种状态resolve,reject
3.promise函数不会马上触发，要通过一个then函数去触发
4.then触发的是resolve的状态，catch触发reject的状态
  resolve  --->成功   --then
  reject   --->失败   --catch

function go(){
  return new Promise((resolve,reject)=>{
    resolve(1);
    reject(2);
  })
}
go().then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})

例子

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

1.2封装promise

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<script>
      function http(){
      return new Promise((resolve,reject)=>[
        $.ajax({
          url:"https://music.aityp.com/top/playlist?cat=华语",
          type:"get",
          success:res=>{
            resolve(res)
          },
          error:err=>{
            reject(err)
          }
        })
        })
    }
    http().then(res=>{
      console.log(res)
    })
</script>

例子—网易云音乐

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

lib/http-promist.js

var baseUrl="https://music.aityp.com/";
function http(url){
    return new Promise((resolve,reject)=>{
        $.ajax({
            url:baseUrl+url,
            type:"get",
            success:res=>{
                resolve(res)
            },
            error:err=>{
                reject(err)
            }
        })
    })
}

/*使用promise之后将http请求由纵向的变为横向的了*/
http("top/playlist?cat=华语").then(res=>{
  let id=res.playlists[0].id;
  return id
}).then(res=>{
  http(`playlist/detail?id=${res}`).then(res=>{
    let id=res.playlist.trackIds[0].id;
    return id
  }).then(res=>{
    http(`song/url?id=${res}`).then(res=>{
      console.log(res)
    })
  })
})