详解JS的四种异步解决方案！

目录

同步&异步的概念

js中异步的应用场景

实现异步的四种方法

1、 回调函数

2、Promise

3、Generator

4、 async/await

---

        「异步编程」是前端工程师日常开发中经常会用到的技术，也是校招面试过程中常考的一个知识点。

        通过掌握「异步编程」的四种方式，可以让我们能够更好地处理JavaScript中的异步操作，提高代码的性能和用户体验。

        因此，「今天就想和大家来聊聊JS异步编程的四种方式！」

同步&异步的概念

在讲这四种异步方案之前，我们先来明确一下同步和异步的概念：

        所谓「同步(synchronization)」，简单来说，就是「顺序执行」，指的是同一时间只能做一件事情，只有目前正在执行的事情做完之后，才能做下一件事情。

        「同步操作的优点」在于做任何事情都是依次执行，井然有序，不会存在大家同时抢一个资源的问题。

        「同步操作的缺点」在于「会阻塞后续代码的执行」。如果当前执行的任务需要花费很长的时间，那么后面的程序就只能一直等待。

        所谓「异步(Asynchronization)」，指的是当前代码的执行不影响后面代码的执行。当程序运行到异步的代码时，会将该异步的代码作为任务放进「任务队列」，而不是推入主线程的调用栈。等主线程执行完之后，再去任务队列里执行对应的任务即可。

        因此，「异步操作的优点就是：不会阻塞后续代码的执行。」

js中异步的应用场景

开篇讲了同步和异步的概念，那么在JS中异步的应用场景有哪些呢？

• 「定时任务」：setTimeout、setInterval

• 「网络请求」：ajax请求、动态创建img标签的加载

• 「事件监听器」：addEventListener

实现异步的四种方法

        对于「setTimeout、setInterval、addEventListener」这种异步场景，不需要我们手动实现异步，直接调用即可。

        但是对于「ajax请求」、「node.js中操作数据库这种异步」，就需要我们自己来实现了~

1、 回调函数

在微任务队列出现之前，JS实现异步的主要方式就是通过「回调函数」。

以一个简易版的Ajax请求为例，代码结构如下所示：

function ajax(obj){
 let default = {
   url: '...',
   type:'GET',
   async:true,
   contentType: 'application/json',
   success:function(){}
    };

 for (let key in obj) {
        defaultParam[key] = obj[key];
    }

    let xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    xhr.open(defaultParam.type, def