async await的使用

川长思鸟来 2023-03-02 13:08 17阅读 0赞

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链中的错误