async await用法

async await用法

这里有段返回promise对象的函数现在有个需求:依次打印这两张图片

import "babel-polyfill"//因为async是es7中的
//这里需要cnpm install --save-dev babel-polyfill安装后import
function loadImg(src){
	var promise=new Promise(function(resolve,reject){
		var img=document.createElement("img");
		img.onload=function(){
			resolve(img)//成功后返回的值
		}
		img.onerror=function(){
			reject('图片加载失败')//失败则提示失败
		}
		img.src=src
	})
	return promise//这段函数返回一个promise对象
}
var src1="http://i0.hdslb.com/bfs/archive/f612c0b3c80c42aa2f00de067f4c11f0ef873ac1.png"
var src2="http://i0.hdslb.com/bfs/archive/f612c0b3c80c42aa2f00de067f4c11f0ef873ac1.png"
//两张图片的src是网上随便取的

之前用promise就通过.then()的方法取得data下面看下async的用法

var load=async function(){
	var result1=await loadImg(src1)
	console.log(result1)
	var result2=await loadImg(src2)
	console.log(result2)
}
load();//执行load函数

用法：把关键字async放到函数声明前面来声明它是一个异步函数
那声明这个async函数有什么用呢?
接下来就要看await的配合了

await是啥?

每次调promise函数前都加个await
这个await好比收费站的道闸杆子
等await后面的这个promise函数执行完毕才会开闸让async函数继续执行
从而起到依次执行，异步变同步的作用

还不理解的话把async和await从代码中删掉看看?

var load=function(){
	var result1=loadImg(src1)
	console.log(result1)
	var result2=loadImg(src2)
	console.log(result2)
}
load();//执行load函数

这不正是我们初学js时掉进异步和同步的坑吗(异步是啥还不懂的先回炉重造先TAT)
可以说async让我们很舒服的可以用同步的写法去书写异步代码。