JS 中的 async 和 await

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>
  1. 阮一峰 es6 · Promise https://es6.ruanyifeng.com/#docs/promise
  2. axios http://www.axios-js.com/docs/
  3. axios 封装 https://www.cnblogs.com/chaoyuehedy/p/9931146.html
  4. 理解 js 中的 async和await https://segmentfault.com/a/1190000007535316
posted @ 2021-10-03 21:00  EGU0  阅读(1239)  评论(0)  编辑  收藏  举报