javaScript中的async和await的理解和案例

async / await

• ES6 提出的语法, ES7 进行完善并且大规模使用的语法
• 两个关键字
• 阻塞式同步
• 要知道async就是将函数返回值使用Promise.resolve()包裹了下，和then中处理返回值一样
• await不能直接执行setTimeout

1. async: 书写在函数的最前面, 把这个函数修改为一个 异步函数
   => async function fn() {}
   => 为了表示函数内部的 代码 是一段异步代码
   => 为了让 await 关键字可以使用
2. await
   => 能且只能等待一个 promise 对象的完成
   => 只要你在 await 后面书写一个 promise 对象
   => 那么你本身应该在 then 里面接受的结果, 可以直接在 await 前面定义变量接受
   => 当这个 promise 没有完成的时候, 后面行的代码不会继续执行

标准样式案例:

 function showLight(color,time){
     
          return new Promise(function(resolve,reject){
     
              setTimeout(function(){
     
                  console.log(color);
                  resolve();//如果没有resolve  会一直挂起，执行resolve后可以没有then
                  // reject();//await reject会报错(没有catch执行或者then的第二个参数函数)
              },time)
          })
      }
      async function showLights(){
     
          // await showLight("红色",2000).catch(function(){
     
          //     console.log("aaa");
          // })
          await showLight("红色",2000);
          await showLight("黄色",2000);
          await showLight("绿色",2000);
          showLights();
      }
      showLights();

 async function fn() {
     
      console.log('我是 fn 函数')

      // 如果你想使用 await 关键字
      // 那么这个函数前面必须有 async 关键字
      // await console.log('你好')
      const res1 = JSON.parse(await pAjax({
      url: './server/01.php', data: 'a=10&b=20' }))
      console.log('第一次请求结果 : ', res1)

      // 继续发送第二个请求
      const res2 = JSON.parse(await pAjax({
      url: './server/02.php', data: `c=${
       res1.c}&d=${
       res1.d}` }))
      console.log('第二次请求结果 : ', res2)

      // 继续发送第三个请求
      const res3 = JSON.parse(await pAjax({
      url: './server/03.php', data: `e=${
       res2.e}&f=${
       res2.f}` }))
      console.log('第三次请求结果 : ', res3)

      console.log('我是 fn 函数内部的后续代码')
    }

    fn()
    
	function pAjax(options) {
     
	  return new Promise(function (resolve, reject) {
     
	    ajax({
     
	      url: options.url,
	      data: options.data,
	      async: options.async,
	      method: options.method,
	      success (res) {
     
	        resolve(res)
	      }
	    })
	  })
	}

下面案例来自:简书Croc_wend 如不能理解,请跳转阅读

  async function async1() {
     
        console.log("async1 start");
        await async2();   //微任务
        console.log("async1 end");
      }
      async function async2() {
     
        console.log("async2");
      }
      console.log("script start");
      setTimeout(function () {
       //宏任务 
        console.log("setTimeout");
      }, 0);
      async1();
      new Promise(function (resolve) {
     
        console.log("promise1");
        resolve();
      }).then(function () {
     
        console.log("promise2");  //微任务
      });
      console.log("script end");