【前端面试题】Promise的使用（异步编程、回调地狱）

最新推荐文章于 2024-05-28 22:38:26 发布

@Dai

最新推荐文章于 2024-05-28 22:38:26 发布

阅读量662

点赞数 1

分类专栏：前端面试题文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/weixin_46318413/article/details/122027650

版权

前端面试题专栏收录该内容

22 篇文章 2 订阅

订阅专栏

实现异步编程的方式—新旧对比（新：Promise；旧：回调函数）

1、fs文件操作

2、AJAX网络请求

3、定时器（见“回调地狱”）

4、数据库读取（这里使用async和await）

Promise是什么？

Promise是ES6引入的新的技术，是实现异步编程的新方案。Promise是一个构造函数，它用来封装一个异步操作并可以获取其成功或者失败的结果值。

Promise有什么优点？

Promise可以实现异步编程，支持链式调用，可以解决回调地狱问题。

异步编程是什么？

异步编程允许我们在执行一个长时间任务时，程序不需要进行等待，而是继续执行之后的代码，直到执行完成了再回来通知你，通常是以回调函数（callback）的形式。这种模式避免了程序的阻塞，大大提高了CPU的执行效率。

回调地狱是什么？

回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件。

缺点：1、不便于阅读；2、不便于异常处理

setTimeout(() => {
    console.log('等三秒');
    setTimeout(() => {
        console.log("又等三秒");
        setTimeout(() => {
            console.log("又又等三秒");
        }, 3000);
    }, 3000);
}, 3000);
//执行结果：三秒后->输出“等三秒”；又等三秒后->输出“又等三秒”；又等三秒后->输出“又又等三秒”
//总共执行9秒才执行完

以上这种情况就被成为“回调地狱”。

回调地狱怎么解决？（Promise）

//链式调用   定义方法用来返回promise对象
function promiseTime(str) {
    return new Promise((resolve, reject) => {
        //业务代码
        setTimeout(() => {
            resolve(str);
        }, 3000);
    })
}

//执行
promiseTime('等三秒')
    .then((value) => {
        console.log(value)
        return promiseTime('又等三秒')
    })
    .then((value) => {
        console.log(value)
        return promiseTime('又又等三秒')
    })
    .then((value) => {
        console.log(value)
    })
//执行结果：三秒后->输出“等三秒”；又等三秒后->输出“又等三秒”；又等三秒后->输出“又又等三秒”
//总共执行9秒才执行完

以上为Promise链式调用的方法解决回调地狱。

实现异步编程的方式—新旧对比（新：Promise；旧：回调函数）

1、fs文件操作

这里需要自己加一个'file.txt'的文件。

//读取txt文件的内容
const fs = require('fs');

//回调函数的形式
fs.readFile('./file.txt', (err, data) => {
    //如果失败，会报失败的错误
    if (err) throw (err);
    //输出txt的内容
    console.log(data.toString())
})

//promise的形式
let p = new Promise((resolve, reject) => {
    fs.readFile('./file.txt', (err, data) => {
        //如果失败，会报失败的错误
        if (err) reject(err);
        //输出txt的内容
        resolve(data.toString())
    })
})
//调用then
p.then((data) => {
    console.log(data)
}, (reason) => {
    console.log(reason)
})

2、AJAX网络请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise-AJAX</title>
</head>

<body>
    <button>请求接口（回调函数）</button>
    <button>请求接口（Promise）</button>
    <script>
        //获取 btn回调函数 DOM
        const btn = document.getElementsByTagName('button');
        btn[0].onclick = function () {
            //回调函数的形式
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.apiopen.top/getJoke');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    //判断响应状态码2xx
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //控制台输出响应体
                        console.log(xhr.response)
                    } else {
                        //控制台输出响应状态码
                        console.log(xhr.status)
                    }
                }
            }
        }
        //获取 btn-Promise DOM
        btn[1].onclick = function () {
            //Promise的形式
            const p = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', 'https://api.apiopen.top/getJoke');
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        //判断响应状态码2xx
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //控制台输出响应体
                            resolve(xhr.response)
                        } else {
                            //控制台输出响应状态码
                            reject(xhr.status)
                        }
                    }
                }
            })
            p.then((data) => {
                console.log(data)
            }, (reason) => {
                console.log(reason)
            })
        }
    </script>
</body>

</html>

3、定时器（见“回调地狱”）

4、数据库读取（这里使用async和await）

async的作用是将函数标记为异步函数（指的是返回值为Promise对象的函数），其中可以使用其他的异步函数，但是不需要再使用then了，而是通过await来等待Promise完成之后再执行async中之后的代码，但是不会阻塞async外的其他代码的执行。

以上就是Promise的使用，包括异步编程、回调地狱、链式调用、async和await。

我是前端Dai，一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder，希望大家一起进步，加油。

@Dai

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端面试题】Promise的使用（异步编程、回调地狱）

以上就是Promise的使用，包括异步编程、回调地狱、链式调用、async和await。我是前端Dai，一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder，希望大家一起进步，加油。
复制链接

扫一扫