async await的使用

async await 是基于promise的语法糖
它们使得异步代码易于编写和阅读

async

放在函数声明之前,使得函数变成 async function

function fn(){ return "a"}
fn()

使用async,将其变成异步函数
async function fn() { return "a" }
fn()

let res = async ()=>{ return "a" }

使用async的函数会返回一个promise
要实际使用promise完成时返回的值,可以使用 .then()

fn().then((res)=>console.log(res))

或

fn().then(console.log)

await

await只在异步函数里才起作用
它可以放在任何异步里,基于promise的函数之前
它会暂停代码在这行上,直到promise完成,然后返回结果值.
在暂停的同事,其他等待执行的代码是可以执行的

可以在任何返回promise的函数时使用await , 包括web api函数

async function fn(){
	return res = await Promise.resolve("a")
}
fn().then(alert)

async functiono myFn(){
	let response = await fetch("coffee.jpg")
	return await response.blob();
}

myFn().then((blob)=>{
	let objUrl = URL.createObjectURL(blob);
	let image = document.createElement("img");
	image.src = objUrl;
	document.body.appendChild(image)
})

原来的函数是这样的

fetch("coffee.jpg")
	.then(response => response.blob())
	.then(myBlob =>{
	let objUrl = URL.createObjectURL(myBlob);
	let image = document.createElement('img');
	image.src =  objUrl;
	document.body.appendChild(image)
})
.catch( e=>{
	console.log(e.message)
})

工作原理

在function关键字前面加上 async关键字, 创建一个异步函数来定义代码块,在其中运行异步代码, await只能在异步函数内部工作
使用async await 和promise非常相似,但是存在一些差异
aysnc await 不需要依附 .then() 代码块到每个promise-based方法的结尾,只需要在方法调用前添加 await 关键字, 然后把结果赋值给变量
await关键字使得JavaScript运行时暂停在这一行上面,允许其他代码在这段时间执行,直到异步函数调用返回结果.结果一旦返回,代码就继续从下一行开始执行

添加错误处理

可以将 try…catch 和async/await结合使用

async function myFn(){
	try {
		let response = await fetch("coffee.jpg");
		let blob = await response.blob();
		let objUrl = URL.createObjectURL(blob);
		let img = document.createElement("img");
		img,src = objUrl;
		document.body.appendChild(img);
	}catch(e){
		console.log(e)		
	}
}
myFn();

.catch() 将捕获来自异步函数调用和promise链中的错误