async

  顾名思义，异步。async函数对 Generator 函数的改进，async 函数必定返回 Promise，我们把所有返回 Promise 的函数都可以认为是异步函数。特点体现在以下四点：

  • 内置执行器
  • 更好的语义
  • 更广的适用性
  • 返回值是 Promise
    1. async function go(){
    2.   return 10;
    3. }
    4. console.log(go())
    1.                                                           ![image.png](https://cdn.nlark.com/yuque/0/2020/png/2706952/1607499626060-0d96f2cb-9a41-4f73-8ab0-ac7774f9bd67.png#align=left&display=inline&height=44&margin=%5Bobject%20Object%5D&name=image.png&originHeight=88&originWidth=330&size=5702&status=done&style=none&width=165)

    await

      顾名思义，等待。正常情况下，await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。另一种情况是，await命令后面是一个thenable对象（即定义then方法的对象），那么await会将其等同于 Promise 对象。

混合使用
  先看示例：

  1. <body>
  2.     <script>
  3.         async function go() {
  4.             return 10;
  5.         }
  6.        go().then(res=>{
  7.            console.log(res)
  8.        })
  9.         async function getResult(){
  10.             var res = await go();
  11.             console.log(res)
  12.         }
  13.         getResult()
  14.     </script>
  1. function sleep(ms) {
  2.     return new Promise(function(resolve, reject) {
  3.         setTimeout(resolve,ms);
  4.     })
  5. }
  6. async function handle(){
  7.     console.log("AAA")
  8.     await sleep(5000)
  9.     console.log("BBB")
  10. }
  11. handle();
  12. // AAA
  13. // BBB (5000ms后)

  我们定义函数sleep，返回一个Promise。然后在handle函数前加上async关键词，这样就定义了一个async函数。在该函数中，利用await来等待一个Promise

异步同步

promise是代码层面的异步，在执行的时候为异步，渲染到页面时同步

  1.         <script>
  2.         var a = new Promise((resolve, reject) => {
  3.             setTimeout(() => {
  4.                 resolve("http1")
  5.             }, 2000)
  6.         })
  7.         var b = new Promise((resolve, reject) => {
  8.             setTimeout(() => {
  9.                 resolve("http2")
  10.             }, 1000)
  11.         })
  12.         //在加载数据的时候异步，1s后加载出b，2s加载出a
  13.         //渲染时因为var res = await a;在前，所以先输出a中"http1"
  14.         async function go(){
  15.             var res = await a;
  16.             var sum =  await b;
  17.             console.log(res);
  18.             console.log(sum);
  19.         }
  20.         go();
  21.         //http1
  22.         //http2
  23.     </script>

async封装ajax

  1. /*async*/
  2.     function http(url){
  3.         return new Promise(function(resolve,reject){
  4.             $.ajax({
  5.                 url:`http://192.168.4.18:3000/${url}`,
  6.                 method:"get",
  7.                 success:res=>{
  8.                     resolve(res)
  9.                 },
  10.                 error:err=>{
  11.                     reject(err)
  12.                 }
  13.             })
  14.         })
  15.     }
  17. /* async函数做ajax请求*/
  18.     async function go(){
  19.         var res = await http("banner");
  20.         var a = res.banners;
  21.         a.forEach((item)=>{
  22.             var htmlItem = `
  23.                 <img src=${item.imageUrl}>
  24.             `
  25.             $("#list1").append(htmlItem)
  26.             $("#list").append(htmlItem)
  27.         })
  28.         var res = await http("top/playlist?cat=%E5%8D%8E%E8%AF%AD")
  29.         var a = res.playlists;
  30.         a.forEach((item,index)=>{
  31.         afterHandle = handleCount(item.playCount)
  32.         var htmlItem = `
  33.                 <div class="hot-contents">
  34.                 <a href="list.html?id=${item.id}"><img src=${item.coverImgUrl} alt="" class="img"></a>
  35.                 <div class="play">
  36.                     <span></span>
  37.                     <span>${afterHandle}</span>
  38.                     <a href="#"></a>
  39.                 </div>
  40.                 <p class="hot-content-name"><a href="">${item.name}</a></p>
  41.                 </div>
  42.             `
  43.             $("#hotContent").append(htmlItem)
  44.         })
  45.     }
  46.     go()