async和await的使用

async其实是ES7的才有的，是异步操作的进化，其实就是封装一个Promise的对象返回

  async function test(){
  	 	   return 1111
  	 }
  console.log(test())  //Promise {<resolved>: 1111}

async方法在普通的函数前加上"async"关键字即可。执行这个函数，发现并没有返回1111,而是通过Promise.resolved()将1111封装成了一个Promise对象返回。既然是返回的Promise对象，就可以用then方法来处理。

test().then(res=>{
  		console.log(res)  //1111
})

await
yield关键字只能使用在Generator函数中，同样，await关键字也不能单独使用，需要使用在async方法中。 await字面意思是"等待"，它是在等待后面表达式的执行结果。

function testWait(){
  		return new Promise((resolve,reject)=>{
  			setTimeout(function(){
          	console.log("testWait");
          	resolve();
          }, 1000);
  		})
  	}
 async function test(){
  	 	    await testWait()
  	 	   console.log("hello");
 }
  	test()  // 依次打印出  testWait  hello

await的作用，就是阻塞主函数的执行，直到后面的Promise函数返回结果。

await后面不单单只能是一个Promise对象，可以是字符串，布尔值，数值以及普通函数

function testWait(){
  			setTimeout(function(){
          	console.log("testWait");
          }, 1000);
  	}
  	 async function test(){
  	 	    await testWait()
  	 	   console.log("hello");
  	 }
  	test()  // 依次打印出 hello testWait

通过上面的例子我们可以得知
1、await后面如果是一个Promise对象，await会阻塞主函数的执行，等待 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果，然后继续执行主函数接下来的代码。
2、await后面如果是非Promise对象，await等待函数或者直接量的返回，而不是等待其执行结果。

应用场景
一个完成的煮菜任务需要按步骤来完成

	//洗菜
   function prepare(){
   	   return new Promise((resolve) => {
           setTimeout(function(){
             console.log("洗菜");
             resolve();
         },100)
       });  
   }
 
   //炒菜
   function fired(){
        return new Promise((resolve) => {
           setTimeout(function(){
             console.log("炒菜");
             resolve();
         },100)
       }); 
   }
 
   //吃饭
   function eat(){
        return new Promise((resolve) => {
           setTimeout(function(){
             console.log("吃饭");
             resolve();
         },100)
       });
   }
   async function task(){
   	console.log("开始准备");
  	await prepare();
  	await fired();
  	await eat();
  	console.log("完成");
  }
  task(); //依次打印出: 开始准备 洗菜 炒菜 吃饭 完成

猜你喜欢