前端一面基础知识 ③——异步（面试场景题）

最新推荐文章于 2024-08-20 23:25:10 发布

EvenyYl丶

最新推荐文章于 2024-08-20 23:25:10 发布

阅读量1.3k

点赞数 4

文章标签： js 面试 vue javascript html

本文链接：https://blog.csdn.net/qq_40597589/article/details/108712615

版权

本文整理了前端面试中关于异步的常见问题，包括同步与异步的区别、Promise、Event Loop、宏任务与微任务、async/await等内容，并提供了一系列面试场景题，帮助开发者巩固异步知识。

摘要由CSDN通过智能技术生成

前言

根据慕课网的《快速搞定前端技术一面匹配大厂面试要求》课程所整理的题目，陆续更新

常考面试题

如果你觉得自己对异步该部分知识掌握得已经差不多了，那么你可以不看前面的，直接跳转到最底下查看面试场景题

1.同步、异步的区别是什么？

异步：不会阻塞代码的执行

同步：会阻塞代码执行

同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

2.手写用promise

          function myPromise(fn) {
   
            // 回调函数集合
            this.callbacks = [];

            // resolve 方法
            // 往实例上挂载 data
            // 依次执行回到函数
            function resolve(value) {
   
              setTimeout(() => {
   
                this.data = value;
                this.callbacks.forEach((callback) => callback(value));
              });
            }

            // 将 resolve 方法交还
            fn(resolve.bind(this));
          }

          myPromise.prototype.then = function (onResolve) {
   
            return new myPromise((resolve) => {
   
              this.callbacks.push(() => {
   
                // 将结果返回给传入的回调
                const res = onResolve(this.data);
                // 链式调用  的返回值还是 Promise 对象时
                if (res instanceof myPromise) {
   
                  res.then(resolve);
                } else {
   
                  resolve(res);
                }
              });
            });
          };

3.手写用promise加载一张图片

		function loadImg(src) {
   
            const p = new Promise(
                ( resolve , reject ) => {
   
                    const img = document.createElement('img')
                    img.onload = () => {
   
                        resolve(img)
                    }
                    img.onerror