说说JavaScript异步的几种搞法——一篇学会异步操作

╰半橙微兮° 2021-07-24 13:28 278阅读 0赞

说说JavaScript异步的几种搞法

异步在JS中是常用的，六种异步方案:回调函数、事件监听、发布/订阅、Promise、Generator和Async。其中重点是发布/订阅、Promise、Async。

![1c28be1e7033f5455a4acc002936e57d.png][]

# 一、六种异步方案 #

## 1、回调函数 ##

核心思想：把任务的第二段单独放到一个函数里面，等到重新执行这个任务的时候，直接调用这个函数。

优点：简单、容易理解和实现

缺点：结构混乱，特别多次调用时候

用法：

function sleep(time, callback) {
        setTimeout(() => {
            // 一些逻辑代码
            callback();
        }, time);
    }

## 2、事件监听 ##

原理：异步执行不取决于代码执行的顺序，而取决于某个事件是否发生

dom.addEventListener('click', () => {
        console.log('dom被点击后触发！！！');
    })

## **3、发布/订阅（最不常用）** ##

原理：发布/订阅模式在观察者模式的基础上，在目标和观察者之间增加一个调度中心。订阅者（观察者）把自己想要订阅的事件注册到调度中心，当该事件触发的时候，发布者（目标）发布该事件到调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。

## 4、promise（比较常用） ##

原理：Promise 是异步编程的一种解决方案，是为解决回调函数地狱这个问题而提出的，它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套改为链式调用。

优点：将回调函数的嵌套改为了链式调用；使用then方法以后，异步任务的两端执行看的更加清楚。

缺点：Promise 的最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。

用法：

## 5、generator（ES6的写法） ##

原理：Generator 函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。其最大特点是可以控制函数的执行

优点：异步操作表示的很简洁，此外可以控制函数的执行

缺点：流程管理不方便，不能实现自动化的流程管理

function* genF() {
        yield 'come on!';
        yield 'Front End Engineer';
        return 'goood';
    }
    
    const gF = genF();
    gF.next();// {value: "come on!", done: false}
    gF.next();// {value: "Front End Engineer", done: false}
    gF.next();// {value: "goood", done: true}
    gF.next();// {value: undefined, done: true}

## 6、async（ES2017写法） ##

原理：ES2017 标准引入了async函数，使得异步操作变得更加方便。简言之，该函数就是Generator函数的语法糖

async function asyncFun() {
        await func1()
        
        await func2();
        
        return '666';
    }
    function func1() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('888')
            }, 100);
        }).then((value) => {
            console.log(value);
        });
    }
    
    function func2() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('777')
            });
        }).then((value) => {
            console.log(value);
        });
    }
    
    asyncFun().then((value) => {
        console.log(value);
    });
    // 888
    // 777
    // 666

[1c28be1e7033f5455a4acc002936e57d.png]: /images/20210724/61e82d34e3d54ec2a27ffda39dc2e46c.png