async 函数

78 阅读2分钟

一、基本介绍

async 函数是个异步函数 在ES2017 标准引入了 async 函数,使得异步操作变得更加方便, async 函数还是 Generator 函数的语法糖。
async 函数是使用关键字声明的函数。
async 函数是[AsyncFunction]构造函数的实例, 并且其中允许使用关键字,和关键字让我们可以用一种更简洁的方式写出基于[Promise]的异步行为,而无需刻意地链式调用
async await async await promise
async 函数还可以被[作为表达式]来定义。

async的作用是什么

async 的作用就是将promise和生成器的效果融合了一下,promise主要用于解决回调地狱,也就是将异步代码同步封装。async同样能达到这个效果,而它达成效果依赖的则是生成器的特性。

参数

  • name

    函数名称。

  • param

    要传递给函数的参数的名称。

  • statements

    包含函数主体的表达式。可以使用机制。await

返回值

一个Promise,这个 promise 要么会通过一个由 async 函数返回的值被解决,要么会通过一个从 async 函数中抛出的(或其中没有被捕获到的)异常被拒绝。

async的使用方法

只需要在函数前面加上 async 就可以了

        async function fun() {

        }

        let fun = async function () {

        }
        document.onclick = async function () {

        }

await的使用方法:

  • await操作符只能在异步函数 async function 中使用
  • await表达式会暂停当前 async function 的执行,等待 Promise 处理完成。
  • 若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,然后继续执行

例如:

    function request() {
        return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve("await:");
            }, 1000);
        });
        }
    async function get() {
        let res1 = await request();
        console.log(res1, 'A');
        let res2 = await request();
        console.log(res2, '2');
        let res3 = await request();
        console.log(res3, 'C');
    }
    get();

await会有序的执行,上一个执行完毕才会执行下一个,运行结果如下:

image.png