1. 程式人生 > 其它 >promise升級版async,await來襲,搭配try+catch更香哦

promise升級版async,await來襲,搭配try+catch更香哦

promise升級版async,await來襲,搭配try+catch更香哦:https://blog.csdn.net/wxiao_xiao_miao/article/details/120375060

async,await 是es7中新增的語法,用來進一步改進非同步程式碼的寫法,是promise升級版!

async await號稱非同步的終極解決方案,async await之後再無回撥

金句:

1.await關鍵字只能用在被async修飾的函式內;

2.await的作用是在async函式內, 區域性等待後面Promise的成功的結果,即await就是用來取代then函式的;

3.一旦await後面Promise報錯, 程式碼就不會往下執行了

4.若想進一步捕獲同步程式碼報錯, 則使用try+catch關鍵字

//try、catch語法:
// try { 可能會報錯的同步程式碼 }
// catch (err) {
// 一旦try裡的程式碼報錯了, 直接進入這裡執行
// }
執行流程
在執行async函式(設名為asyncF)時,進入函式內部: - 按序執行同步程式碼,- 遇到await,跳出asyncF函式。

const p1 = new Promise((resolve, reject) => {
setTimeout(()=>resolve(100), 3000)
})
async function f () {
console.log('開始執行f')
var a = await p1
console.log('p1完成了')
console.log(a)
return 1
}

console.log('主函式執行...')
const res = f()
console.log('f()完成,返回值是', res)
res.then(res => { console.log(res) })

//執行結果:
//主函式執行...
//開始執行f
//f()完成,返回值是 Promise { <pending> }
//----此處等了3s----
//p1完成了
//100
//1
async
函式返回一個 Promise 物件,可以使用then方法添加回調函式。

function f1 () {
return 1
}
async function f2 () {
return 1
}
async function f3 () {}
const r1 = f1()
const r2 = f2()
const r3 = f3()
console.log(r1) // 1
console.log(r2) // Promise, resolved(1)
console.log(r3) // Promise, resolved(undefined)
r2.then(res => { console.log(res) }) //1
r3.then(res => { console.log(res) }) //undefined
async的返回值
async函式返回的 Promise 物件,必須等到內部所有await命令後面的 Promise 物件執行完,才會發生狀態改變,除非遇到return語句或者丟擲錯誤。也就是說,只有async函式內部的非同步操作執行完,才會執行then方法指定的回撥函式。

const p1 = new Promise((resolve, reject) => {
setTimeout(() => resolve(100), 3000)
})

const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve(200), 5000)
})
async function f () {
console.log('開始執行f')
var a = await p1
console.log('p1完成了')
var b = await p2
console.log('p2完成了')
return a + b
}

console.log('主函式執行...')
const res = f()
console.log('f()完成,返回值是', res)
res.then(res => { console.log(res) })

//執行結果
//主函式執行...
//開始執行f
//f()完成,返回值是 Promise { <pending> }
//----此處等了3s----
//p1完成了
//----此處等了2s----
//p2完成了
//300
await
正常情況下,await命令後面是一個 Promise 物件,返回該promise的值。如果不是 Promise 物件,就直接返回對應的值。

async function f() {
const p = new Promise((resolve, reject) => {
resolve(100)
})
const a = 1
// await 等待promise的狀態變化完成(pending->resolved, pending->rejected)
// 取出promise的值
const b = await p
console.log(a, b) //1 100
}
f()
————————————————
版權宣告:本文為CSDN博主「王——小喵」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/wxiao_xiao_miao/article/details/120375060