promise 会将函数的状态暂停(凝聚,冻结)
resolve — 处理成功的情况
reject — 处理失败的情况
promise不会直接触发,它会通过(then,catch)才会触发

 1.触发promise的resolve状态,可以then函数去触发
 2.触发reject状态,通过catch函数去触发**

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <!-- 3种 -->
  10.     <!-- promise   会将函数的状态暂停(凝聚,冻结)
  11.         resolve  -- 处理成功的情况
  12.         reject -- 处理失败的情况
  13.         promise不会直接触发,它会通过(then,catch)才会触发
  14.     -->
  15.     <!-- 
  16.         1.触发promise的resolve状态,可以then函数去触发
  17.         2.触发reject状态,通过catch函数去触发
  18.      -->
  19.     <script>
  20.         var p = new Promise((resolve,reject)=>{
  21.             // resolve(1);
  22.             reject(2);
  23.         })
  24.         p.then(res=>{
  25.             console.log(res)
  26.         }).catch(err=>{
  27.             console.log(err)
  28.         })
  29.     </script>
  30. </body>
  31. </html>

promise封装ajax

将纵向嵌套的ajax,变成横向的了,结构稍微清晰了一点。

function http(url){
            return new Promise((resolve,reject)=>{
               $.ajax({
                   url,
                   type:"get",
                   success:res=>{
                       resolve(res)
                   },
                   error:err=>{
                       reject(err);
                   }
               })
            })
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="promise-ajax/index.js"></script>
</head>
<body>
    <script>
        http("top/playlist/?cat=华语").then(res=>{
            let id = res.playlists[0].id;
            return id;
        }).then(res=>{
            let id  = res
            http(`playlist/detail?id=${id}`).then(res=>{
                var {name,id} = res.playlist.tracks[0]
                console.log(id);
            })
        })
    </script>
</body>
</html>

callback封装jquery-ajax

function http({url,type="get",success}){
            $.ajax({
                url,
                type,
                dataType:"json",
                success:res=>{
                    success(rs)
                }
            })
}