ES6中async與await的使用方法
阿新 • • 發佈：2020-04-05
## 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('操作完成')
}
```
輸出結果：
檢視更多內容請訪問:根號七的