es6---回调地狱

最新推荐文章于 2024-07-04 18:17:11 发布

console.log(reverse)

最新推荐文章于 2024-07-04 18:17:11 发布

阅读量214

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/m0_62690153/article/details/121041150

版权

本文介绍了ES6中的Promise和async/await来解决回调地狱的问题。详细讲解了Promise的基本概念、.then()、.catch()、Promise.all()、Promise.race()的用法，并重点探讨了async函数和await关键字，阐述了它们如何改善异步代码的可读性和可维护性。同时，还提及了JavaScript的EventLoop机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

回调地狱

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

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

`promise`基本概念

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

Promise.prototype 上包含一个 .then() 方法实例化对象可以访问then方法
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 操作
（等待机制）

Promise.race() 方法

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

进行任务队列的监听，如果在任务列表中有任务需要执行，就会依次执行

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