「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

一、异步操作必备知识

1.1 JS是单线程的

javascript语言是单线程语言。什么是单线程，就是同一时间JS只能执行一个任务。比如说，我们去饭店吃饭，只有一个服务员结账，大家就只能排队一个一个来，后边的人就只能等前面的人完成之后在结账。如果前一个人问题非常的多。那么等待的时间也会随之变得更长。这种就是单线程。

那么，你肯定会问，既然这样，那为什么不设计成双线程语言或更多线程语言呢？你可以再想想，如果我们用JS同时操作一个DOM节点。第一个线程让这个DOM节点隐藏，第二个线程让其显示？那么问题来了，这个DOM元素到底是隐藏还是结束呢？很显然，多线程的设计问题会更大。那么，我们就没办法解决等待时间长这个问题了么？当然有，那就是同步和异步任务

1.2 同步任务和异步任务

说到同步任务和异步任务，我执行如下代码就会发现，会直接打印出一个3，会在大约1s后打印出第二个3。我们通常吧这种立即执行的操作叫做同步任务。把这种得一会才能执行的操作叫异步任务。

我们在来看下面两端代码，来加深我们的理解。

上面两断代码的执行顺序是什么呢？其实答案是1 3 2。很多人其实会对第二段代码产生疑问，等待0s不应该就是你立即执行么？如果你有疑问，那说明你还没有彻底理解异步任务。我们可以用一张流程图来理解一下。

从上图中我们可以看出，异步任务的执行是在所有同步任务执行之后再去执行。所以，上面代码中虽然是0s,但是它本身还是异步任务中，进入了异步任务队列，就得在同步任务执行之后在执行。0s的意思是当这个异步任务进入异步任务池之后0后进入异步任务队列。

同时，我们还要知道，上面代码中的0s和1s，真的就是准确的么？我们可以通过一段伪代码来理解一下。 下面得代码要等同步任务执行完，也就是5s之后才能执行seTtimeout内的代码。足以说明，0s和1s不是说这个时间后代码就会执行，这个时间代表的是进入异步任务队列的时间。而不是代码执行的时间。

二、ajax原理

ajax全称是Asynchronous JavaScript and XML，即异步的JavaScript和XML。ajax的最大优点就是在不用刷新页面的情况下，就可以与服务端交换数据并局部更新页面。这也可以理解为异步更新。我们可以用代码来表述一下

其实，我们也可以直接将其封装成一个函数

三、Callback Hell(回调地狱)

Callback Hell其实是一种非常不好的代码书写。但是我们为了之后学习Promise等异步知识时，我们需要理解什么是回调地狱，这会让我们之后的学习变得更加简单。

我们先来看一下，什么是所谓的回调地狱，我们需要用到上面封装的ajax函数，我们有一个需求，就是要在调用第一次ajax成功后在在请求一个接口，在第二次成功后在调用一个接口。也就是嵌套调用3个接口。代码如下：

这种层层嵌套的结构就是回调地狱，其实这种场景有很多，比如我们常见的省市区三级联动。这里是嵌套三层，如果嵌套更多甚至几十层，代码将会变得极其的难以维护，可读性很差。这就是我们所说的回调地狱。