本文共 2787 字，大约阅读时间需要 9 分钟。

回调地狱

回调地狱： 因为js是单线程的， 有些时候为了代码功能需求，需要函数嵌套函数，当函数嵌套多层时，就会形成回调地狱

如何解决回调地狱： 通过Promise() 解决

模拟异步操作

回调地狱实例

function fun() {
               setTimeout(function () {
                   console.log(2);                setTimeout(function () {
                       console.log(1);                    setTimeout(function () {
                           console.log(3);                    })                })                            })        }       fun();  执行顺序是  2  1   3

Promise() 对象

Promise() 对象：

存在三种状态：

• 进行时 pending

• 成功 resolve

• 失败 reject

  状态的改变 只能从 pending 转换为 resolve; 或者 从pending 转换为 reject； 如果处于pending状态，永远不知道下一步转换为什么状态

  Promise() 接受一个函数作为参数； 函数存在两个参数（这两个参数是js原生提供的） 一个是resolve， 一个是reject

Promise()的执行机制：

如果Promise()执行成功，则会调用执行 resolve()； resolve()中的参数就是执行成功的结果，通过then() 进行接受， then() 参数是一个函数，函数的参数就是 resolve传递传递出来的数据

如果Promise()执行失败， 则会调用执行 reject(); reject()中的参数就是执行失败的错误信息， 通过 catch()进行接受， catch的参数一个函数。 函数的参数 err 就是reject 传递出来的错误信息

上实例

官方解释

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise()基本结构：

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数； 因为这样， 可以通过Promise() 解决回调地狱的问题

Promise.all()方法

10个ajax请求 全部执行结束 然后在去做下一件事情 ； 如何判断10个请求都执行完成结束了呢？

Promise.all() 方法可以解决这个问题：

接受的参数是一个数组， 数组中的每个值是promise 实例对象， all()的状态是由参数的状态的决定 ； 所有的promise对象都成功则成功，有一个失败则失败

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。（返回的结果是一个新的Promise()对象）

看输出代码

我们让其一个值状态为失败,看下是不是这样呢

function fun2() {
               return new Promise((resolve, reject) => {
                   setTimeout(() => {
                      console.log('setTimeout2');                      reject('setTimeout2 的 data2');                }, 1500)            })        }

Promise.race() 方法

Promise.race() 方法 的参数是一个数组， 数组中的每个值是 Promise() 实例对象； 最后返回一个新的Promise() 对象

状态 改变： fun1(), fun2(), fun3() 三个实例对象 谁的状态先改变（不管成功还是失败），则p的状态都会随之跟随改变 如果fun1(), fun2(), fun3() 三个实例对象 先改变的状态是成功，则成功，如果失败就是失败

我们看下先改变的值为成功的情况

function fun1() {
           return new Promise((resolve, reject) => {
               setTimeout(() => {
                   console.log('setTimeout1');              resolve('setTimeout1 的 data1  成功');            }, 1000)        })    }

async 函数

async 函数 是一个异步操作， 返回的是一个Promise()对象

await 等待 ; 在 async函数中使用 通常情况下 await 后是一个Promise()对象， 如果不是，会自动转换为Promise()对象

当Promise()方法 有多个then()时用 async方法

宏任务和微任务

来源

js 是单线程执行的，js中的任务按顺序一个一个的执行，但是一个任务耗时太长； 那么后面的任务就需要等待，为了解决这种情况， 将任务分为了同步任务和异步任务；

而异步任务又可以分为微任务和宏任务。

宏任务和微任务的分类

宏任务：

setTimeout(定时器每隔多久后执行一次这个函数)

setInterval(定时器只在指定时间后执行一次这个函数)

js主代码

setImmediate(Node)

requestAnimationFrame(浏览器)

微任务：

process.nextTick(node.js中的内容)

Promise的then方法

在没有async(等待)执行过程是

• 执行所有同步的,然后执行异步的

• 存在微任务的话，那么就执行所有的微任务

• 微任务都执行完之后，执行下一个宏任务

小知识:定时器(宏任务)是最后执行

具体解释在 es6收藏

转载地址：https://blog.csdn.net/z18237613052/article/details/114829686 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！