ES6中async与await的使用方法

• 2020 年 4 月 4 日
• 筆記

promise的使用方法

promise简介

是异步编程的一种解决方案。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。解决回调函数嵌套过多的情况

const promise =new Promise(function(resolve,reject){  	setTimeout(function(){  		resolve('执行成功')  	},3000)  })    promise.then(res=>{  	console.log(res)  }).catch(err=>{  	console.log(err)  })  console.log(111)  

等待三秒后输出 ‘执行成功’,也就是说当异步操作完成，即执行resolve或者reject之后，才会执行then中的操作

其他用法

promise.all([])

所有请求都完成时再执行后续操作

var p1 = Promise.resolve(3);  var p2 = 1337;  var p3 = new Promise((resolve, reject) => {    setTimeout(resolve, 100, 'foo');  });    Promise.all([p1, p2, p3]).then(values => {    console.log(values); // [3, 1337, "foo"]  });  

promise.race([])

那个请求先执行完成就返回那个请求结果,这个可以把一个请求与setTimeout对比，实现请求超时的效果

var p1 = new Promise(function(resolve, reject) {      setTimeout(resolve, 500, "one");  });  var p2 = new Promise(function(resolve, reject) {      setTimeout(resolve, 100, "two");  });    Promise.race([p1, p2]).then(function(value) {    console.log(value); // "two"    // 两个都完成，但 p2 更快  });  

async与await

模拟一下经常出现的问题

function getData(){  	return new Promise(function(resolve,reject){  		setTimeout(function(){  //模拟一下请求  			resolve('执行成功')  		},3000)  	})  }  function main(){  	let data=''  	getData().then(res=>{  		data=res  	})  	console.log(data)  	console.log('操作完成')  	setInterval(()=>{  		console.log(data)  	},1000)    }  main()  

运行结果：

可以看到第一个console.log(data)的结果为空，这不难解释，因为main函数内容顺序执行，当getData()的时候异步操作还未完成，所以继续执行下面的操作。当第三秒的时候才执行resolve()并且成功输出data，这也对应了上面promise所说的‘执行resolve或者reject之后，才会执行then中的操作’既然这样事情就简单了，一直等待请求完成不就完事了。
这里更改main函数为

async function main() {          // var data = await getData()//或者  	let data  	 await getData().then((res)=>{  		 data=res  	})  	console.log(data)  	console.log('操作完成')  }  

输出结果：