es6---回调地狱

391 阅读2分钟

什么是回调地狱,回调地狱就是多层回调函数相互嵌套,就形成了回调地狱,今天所讲的方法就解决了回调地狱的弊端

回调地狱

概念: 多层回调函数相互嵌套,就形成了回调函数

1.png 解决回调地狱: promise 使用promise来解决回调地狱的问题

promise基本概念

1.promise是一个构造函数,可以通过new promise得到promise实例对象

  1. Promise.prototype 上包含一个 .then() 方法 实例化对象可以访问then方法
  2. then() 方法用来预先指定成功和失败的回调函数

promise的基本用法

const p1 = new Promise((resolve,reject) => {
    // 成功的时候 可以调用 resolve()方法 
    // 失败的时候 可以调用 reject()方法
})
const fs = require('fs')
const path = require('path')

const p1 = new Promise((resolve,reject) => {
    fs.readFile(文件的路径,'utf8',(err,data) => {
        // err 是一个对象 就表示读取失败 
        // err 是 null 就表示读取成功
        if (err) return reject(err.message)
        resolve(data)
    })
})

p1.then(res => console.log(res), err => console.log(err))

.then()方法

如果一个.then()方法中返回一个新的promise实例对象,则可以通过下一个.then()方法的链式调用,就解决了回调地狱问题

通过 .catch 捕获错误

  • 在 Promise 的链式操作中如果发生了错误,可以使用 Promise.prototype.catch 方法进行捕获和处理

Promise.all() 方法

Promise.all() 方法会发起并行的 Promise 异步操作,
等所有的异步操作全部结束后才会执行下一步的 .then 操作
(等待机制)

2.png

Promise.race() 方法

2.png

async与await (重点)

语法:

async function fn() {
   const r1 = await Promise对象
}

const fn = async () => {
    const r1 = await Promise对象
}

相比.then()优缺点

1..then链式调用的优点,解决了回调地狱的问题

2..then链式调用缺点,代码繁多,阅读性差,不易理解

注意事件:

  • await关键字后面要跟 Promise对象
  • await关键字仅仅只能出来在被async修饰的函数里面
  • 在 async 方法中,第一个 await 之前的代码会同步执行,await 之后的代码会异步执行

EventLoop

进行任务队列的监听,如果在任务列表中有任务需要执行,就会依次执行
  1. js是单一线程,会造成线程死锁,同步会阻塞后面代码的执行
  2. js将非耗时任务在主线程来执行,耗时任务就让委托给宿主环境来执行
  3. 宿主环境有:浏览器 nodejs
  4. 如果在主线程中有异步操作,就会将异步操作委托给宿主环境来执行,宿主环境中执行完异步操作之后,会将回调函数添加到任务队列中,主线程如果执行完所有非耗时任务,就会自动的扫描任务队列中是否有任务需要执行,如果有,就会依次执行