Promise、async-await

一 : async

// 说明: 
  // 1. async用来表示函数是异步的，定义的函数会返回一个Promise对象，可以使用then方法添加回调函数
  // 2. 若 async 定义的函数有返回值，return xxx;相当于Promise.resolve(xxx),没有声明式的 return则相当于执行了Promise.resolve(xxx);
async function basicDemo() {
    let result = await Math.random();
    return result;  
}

basicDemo().then(res=> {
     console.log(res);
});

二 : await

// 说明: 
  // 1. 如果await是 promise对象会造成异步函数停止执行并且等待 promise 的解决后, 在处理后面的代码; 正常表达式时 则立即执行

  function sleep(second) {
     return new Promise((resolve, reject) => {
        setTimeout(() => {
           resolve('enough sleep~');
        }, second);
     })
  }
  
  function normalFunc() {
     return 3; 
  }

  async function awaitDemo() {
     console.log('啊哈哈哈哈----1');

     let result = await sleep(2000);
     console.log(result);

     console.log('啊哈哈哈哈----2');
  }
  awaitDemo();

  输出: 
      啊哈哈哈哈----1
      enough sleep~
      啊哈哈哈哈----2

  这就验证说明了 await是promise对象会造成异步函数停止执行并且等待 promise 的解决。

  注意：如果 awaitDemo函数中没有 return xxx；
  则
  awaitDemo().then(res=>{
     console.log(res); // 此处res=undefined
  });

例子1⃣️：

  // 需求: 你有三个请求需要发生，第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果

 function simulateAsyncFun(second, param) {
     return new Promise((resolve, reject)=>{
        setTimeout(()=>{
           resolve(param);
        }, second)
     })
  }

 async function demo() {
     let res1 = await simulateAsyncFun(2000, '2s');
     let res2 = await simulateAsyncFun(1000, '1s' + `${res1}`);
     let res3 = await simulateAsyncFun(500, '0.5s' + `${res2}`);

     console.log(res1, res2, res3);
  }

  demo();

输出: 
     2s 1s2s 0.5s1s2s

例子2⃣️：并行处理

  // 需求：三个异步请求需要发送，相互没有关联，只是需要当请求都结束后做些操作

  // 方式一：loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的
  ❌❌❌     async function bugDemo() {
                 await sleep(1000);
                 await sleep(1000);
                 await sleep(1000);

                 console.log('clear the loading~');
              }
              bugDemo();

  // 方式二： 正常的处理
  🐩🐩🐩     async function correctDemo() {
                 let p1 = sleep(1000);
                 let p2 = sleep(1000);
                 let p3 = sleep(1000)；
                 await Promise.all([p1, p2, p3]);

                 console.log('clear the loading~');
               }
               correctDemo();

关于： Promise.race

Promise.race(iterable) 方法返回一个 promise；

race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3]) <p1，p2，p3表示Promise对象> 里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态. 所以超过timeout时长就说明请求超时。

例子1： Promise.race([fetch(urlString), delay(timeout)]);

例子2: 
var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

var promise2 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 900, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);
  // Both resolve, but promise2 is faster
});

输出： ‘one’