JS 中的 async 和 await
阿新 • • 發佈：2021-10-03
async / await
MDN 文件：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await
await 表示式會暫停當前 async function 的執行，等待 Promise 處理完成。
若 Promise 正常處理(fulfilled)，其回撥的resolve函式引數作為 await 表示式的值，繼續執行 async function。
若 Promise 處理異常(rejected)，await 表示式會把 Promise 的異常原因丟擲。
另外，如果 await 操作符後的表示式的值不是一個 Promise，則返回該值本身。
await 到底等啥？https://segmentfault.com/a/1190000007535316 #1.2
一般來說，都認為 await 是在等待一個 async 函式完成。不過按語法說明，await 等待的是一個表示式，這個表示式的計算結果是 Promise 物件或者其它值（換句話說，就是沒有特殊限定）。
因為 async 函式返回一個 Promise 物件，所以 await 可以用於等待一個 async 函式的返回值——這也可以說是 await 在等 async 函式，但要清楚，它等的實際是一個返回值。
注意到 await 不僅僅用於等 Promise 物件，它可以等任意表達式的結果，所以，await 後面實際是可以接普通函式呼叫或者直接量的。
簡單的例子
function demo() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('b2');
}, 1000);
})
}
async function b() {
console.log('b1');
console.log(await demo());//此處成功。如果 await 等到異常，則會丟擲異常和停止向下執行
console.log('b3');
}
b();
使用 axios 封裝 get請求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>h1</h1>
</body>
<!-- axios.js -->
<script src="./node_modules/axios/dist/axios.js"></script>
<script type="module">
// get 請求封裝
async function getRequest(url, params) {
return new Promise((resolve, reject) => {
axios({
url: url,
params: params
})
.then((res) => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}
// 模擬同步業務
async function a() {
console.log('1');
await getRequest('https://ku.qingnian8.com/dataApi/qingKu/getArticle.php').then((res)=>{
console.log(res);
}, (e) => { // 處理異常情況，可繼續向下執行
console.log(e);
})
console.log('2');
}
a();
</script>
</html>
- 阮一峰 es6 · Promise https://es6.ruanyifeng.com/#docs/promise
- axios http://www.axios-js.com/docs/
- axios 封裝 https://www.cnblogs.com/chaoyuehedy/p/9931146.html
- 理解 js 中的 async和await https://segmentfault.com/a/1190000007535316