async和await 的理解和用法

Promise和async await 的区别

• Promise是Es6中处理异步请求的语法，使用.then()来实现链式调用，来使用.catch()来捕获异常
• async/await 是对Promise的升级，async用于声明一个函数是异步的，await是等待一个异步函数执行完成
• async/await 用同步的写法写异步（await一个Promise对象），async/await 的捕获异常可以使用try/catch语法。也可以使用.catch语法用同步的方法写异步的代码

定义

• async 是异步的意思，await 则可以理解为async wait 。async用来声明一个异步方法，而await用来等待异步方法执行。

• async 作为关键字放在函数前面，表明该函数是异步函数，异步函数意味着不会阻塞后面代码的执行，而await 用于等待一个方法执行完成

• async/await 的作用就是使异步操作以同步的方式去执行

async

 async function demo(){
  return 'hello world'
 }
 demo().then(val =>{
 
 })
 consoel.log(demo())
 

async function demo2(){
	throw new Error('rejected')
}
demo().then(val => {
	console.log(val)
})

function demo3(){
	return Promise.resolve('TEXT'); 
}
async function demo4(){
	return 'test2';
}
console.log(demo2())

• async的作用返回一个promise对象，并且Promise还有state和result，如果async函数中有返回值，当调用该函数时，内部会调用Promise.resolve()方法把它转化成一个promise对象作为返回,如果异步函数内部抛出错误，那就会调用Promise.reject()返回一个Promise对象。
• 要想获取到async 函数的执行结果，就要调用promise的then 或者 catch 来给它注册回调函数
• demo3和demo4是等效的

await

• await 只能放到async函数里面，await 不仅仅用于等Promise对象，还可以等任意表达式，所以await后面实际是可以接普通函数调用或者直接量。最常使用的是放一个返回Promise对象的表达式。他等待的是Promise对象执行完毕，并且返回结果。
• 如果它等到的是一个Promise对象，await会阻塞函数后面的代码，等着Promise 对象resolve,然后得到resolve值，作为await的运算结果。

function getAnything(){
	return 'Anything'
}
async function demo5(){
	return Promise.resolve('hello async')
}
async function test(){
	const v1 =  await getAnything()
	const v2 = await demo5()
	console.log(v1,v2)
}
test()

async/await 的用法

示例1

function sendAjx(url){
 return x = new Promise((reslove,reject)=>{
 	// 创建对象
 	const x =  new XMLHttpRequest
 	//初始化
 	x.open('GET',url)
 	//发送
 	x.send();
 	//事件绑定
 	x.onreadystatechange=function(){
 	if(x.readyState === 4){
 	 	resolve(x.response)
 	 }else{
	 	 reject(x.status)
 	 }
 	}
 })
}

//测试  
async function main () {
  let result = await sendAJAX("https://api.xxxx.xxx/getJoke")
}
main()

示例2

demo1(){
 return '测试'
}

async function demo2(){
  try{
  const v3 = await demo1()
  console.log(v3)
  }catch{
  	console.log('ERR')
  }
}