ES6中async與await的使用方法

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('操做完成')
}

輸出結果：

查看更多內容請訪問:根號七的網站