前端面试-JS进阶篇1、异步编程promise2、常见的异步操作3、async / await4、Promise如何抓取异常信息，不抓取异常会发生什么情况5、Promise和async/await的区别6、Promise处理并发请求有哪些方法7、单例模式8、协商缓存和强制缓存9、强制缓存和协商缓存的区别10、什么是XSS，前端如何预防XSS攻击11、XSS（跨站脚本攻击）的三种常见类型及其典型攻击场景11、ES5中如何实现class类1、异步编程promisepromise是处理异步操作的对象 可以通过new来创建一个promise常见的异步操作有读取文件、定时器和发送网络请求等。promise有三种状态：pending(进行中)、fullfilled(已成功)、rejected(已失败)当一个异步操作被封装在promise中，就会处于pending状态操作成功，promise状态变成fulfilled,通过.then()方法第一个回调函数获取成功结果操作失败，状态变成rejected,通过.then()方法第二个回调函数和.catch()方法处理错误promise的方法then() 处理promise成功状态(resolved)的情况catch() 处理promise被拒绝状态(reject)的情况finally() 无论成功还是失败 finally函数都会执行 用于执行清理操作 关闭数据库连接停止加载动画等2、常见的异步操作读取文件 / 写入文件 (fs.readFile / fs.writeFile)发送网络请求 （HTTP请求 / WebSocket请求）定时器 （ setTimeout / setInterval ）process.nextTick() 当前同步代码执行完毕，下一轮事件循环开始前优先执行3、async / awaitasync / await常用于处理异步编程，让异步代码书写和执行逻辑更像同步代码，可以解决回调地狱的问题async是一个修饰符，用于声明一个异步函数，在函数前面加上async关键字，函数会返回一个promise对象await 只能在async函数内部使用，用于暂停async函数的执行，直到async / await 封装的promise被解决（resolved）或被拒绝(rejected)async 和 await的使用要点await 必须在async函数内使用async函数总是返回Promise对象处理错误 使用try…catch代码块来包裹await调用，可以优雅地处理异步错误async和await的优点代码可读性高避免产生回调地狱统一管理异常错误, try…catch代码块可以统一捕获await语句抛出的错误async和await的缺点错误难以定位准确位置，异步代码中async返回的是一个promise对象，在多个await调用点中，难以快速追踪到错误的准确位置阻塞同步代码执行，将可以并行执行的异步操作变成同步模式，严重影响性能无法取消，await本身没有提供取消机制，函数执行时无法中途取消这个异步操作兼容性问题回调地狱是指当多个异步操作需要同步顺序执行时，每个操作的回调函数嵌套在前一个回调函数内部，导致代码难以阅读和维护（多个回调函数的嵌套就会形成回调地狱）4、Promise如何抓取异常信息，不抓取异常会发生什么情况Promise抓取异常的方法如下：使用 Promise 提供的.then()方法的第二个回调函数可以捕获异步操作中抛出的错误信息使用 Promise 提供的.catch() 方法可以捕获异步操作中抛出的错误信息使用 try…catch 语句 在 async/await 语法中，使用 try…catch 语句可以捕获异常报错信息Promise中的异常错误没有被捕获会发生什么情况Promise中抛出的异常错误没有被捕获，浏览器会在控制台抛出一个全局错误 Uncaught (in promise)，从而影响用户体验和调试难度5、Promise和async/await的区别维度Promiseasync/await本质异步状态容器基于 Promise 的语法糖书写风格链式.then().catch()容易导致回调地狱同步代码形式try { await ... } catch返回值手动new Promise((resolve,reject)=...)函数自动包装成 Promise错误处理.catch(onRejected)或第二参数try/catch（同步语法）调试体验断点跳 then，栈丢失 ，难以定位具体错误代码行线性栈，报错直接指向await所在具体代码行，调试友好兼容性ES2015 全支持（ES6）ES2017（ES8）+ 编译器（Babel/ts）降级6、Promise处理并发请求有哪些方法Promise.allPromise.all 方法接受一个 Promise 数组作为参数，并返回一个新的Promise。返回的新 Promise 在所有输入的 Promise 都成功完成时才会返回成功，并返回一个包含所有结果的数组。如果任何一个 Promise 失败，Promise.all 会立即拒绝，并返回第一个失败的错误Promise.allSettledPromise.allSettled 方法接受一个 Promise 数组作为参数，并返回一个新的 Promise。这个新的 Promise 在所有输入的 Promise 都完成（无论是成功还是失败）时才会返回成功，并返回一个包含每个 Promise 状态和结果的数组。使用 async/await 和 Promise.all结合 async/await 和 Promise.all，可以使代码更加简洁和易读promise批处理并发请求的案例如下:asyncfunctionfetchBatch(urls,batchSize){constresults=[];construnningPromises=[];for(leti=0;iurls.length;i++){consturl=urls[i];constpromise=fetch(url).then(res=res.json());results.push(promise);// 汇总所有请求结果runningPromises.push(promise);//实时跟踪当前批次的运行状态if 
长河君 · 2026/11/4 1:33:32 · 阅读 1.2k 前端面试-JS进阶篇
前端面试-JS进阶篇1、异步编程promise2、常见的异步操作3、async / await4、Promise如何抓取异常信息，不抓取异常会发生什么情况5、Promise和async/await的区别6、Promise处理并发请求有哪些方法7、单例模式8、协商缓存和强制缓存9、强制缓存和协商缓存的区别10、什么是XSS，前端如何预防XSS攻击11、XSS（跨站脚本攻击）的三种常见类型及其典型攻击场景11、ES5中如何实现class类1、异步编程promisepromise是处理异步操作的对象 可以通过new来创建一个promise常见的异步操作有读取文件、定时器和发送网络请求等。promise有三种状态：pending(进行中)、fullfilled(已成功)、rejected(已失败)当一个异步操作被封装在promise中，就会处于pending状态操作成功，promise状态变成fulfilled,通过.then()方法第一个回调函数获取成功结果操作失败，状态变成rejected,通过.then()方法第二个回调函数和.catch()方法处理错误promise的方法then() 处理promise成功状态(resolved)的情况catch() 处理promise被拒绝状态(reject)的情况finally() 无论成功还是失败 finally函数都会执行 用于执行清理操作 关闭数据库连接停止加载动画等2、常见的异步操作读取文件 / 写入文件 (fs.readFile / fs.writeFile)发送网络请求 （HTTP请求 / WebSocket请求）定时器 （ setTimeout / setInterval ）process.nextTick() 当前同步代码执行完毕，下一轮事件循环开始前优先执行3、async / awaitasync / await常用于处理异步编程，让异步代码书写和执行逻辑更像同步代码，可以解决回调地狱的问题async是一个修饰符，用于声明一个异步函数，在函数前面加上async关键字，函数会返回一个promise对象await 只能在async函数内部使用，用于暂停async函数的执行，直到async / await 封装的promise被解决（resolved）或被拒绝(rejected)async 和 await的使用要点await 必须在async函数内使用async函数总是返回Promise对象处理错误 使用try…catch代码块来包裹await调用，可以优雅地处理异步错误async和await的优点代码可读性高避免产生回调地狱统一管理异常错误, try…catch代码块可以统一捕获await语句抛出的错误async和await的缺点错误难以定位准确位置，异步代码中async返回的是一个promise对象，在多个await调用点中，难以快速追踪到错误的准确位置阻塞同步代码执行，将可以并行执行的异步操作变成同步模式，严重影响性能无法取消，await本身没有提供取消机制，函数执行时无法中途取消这个异步操作兼容性问题回调地狱是指当多个异步操作需要同步顺序执行时，每个操作的回调函数嵌套在前一个回调函数内部，导致代码难以阅读和维护（多个回调函数的嵌套就会形成回调地狱）4、Promise如何抓取异常信息，不抓取异常会发生什么情况Promise抓取异常的方法如下：使用 Promise 提供的.then()方法的第二个回调函数可以捕获异步操作中抛出的错误信息使用 Promise 提供的.catch() 方法可以捕获异步操作中抛出的错误信息使用 try…catch 语句 在 async/await 语法中，使用 try…catch 语句可以捕获异常报错信息Promise中的异常错误没有被捕获会发生什么情况Promise中抛出的异常错误没有被捕获，浏览器会在控制台抛出一个全局错误 Uncaught (in promise)，从而影响用户体验和调试难度5、Promise和async/await的区别维度Promiseasync/await本质异步状态容器基于 Promise 的语法糖书写风格链式.then().catch()容易导致回调地狱同步代码形式try { await ... } catch返回值手动new Promise((resolve,reject)=...)函数自动包装成 Promise错误处理.catch(onRejected)或第二参数try/catch（同步语法）调试体验断点跳 then，栈丢失 ，难以定位具体错误代码行线性栈，报错直接指向await所在具体代码行，调试友好兼容性ES2015 全支持（ES6）ES2017（ES8）+ 编译器（Babel/ts）降级6、Promise处理并发请求有哪些方法Promise.allPromise.all 方法接受一个 Promise 数组作为参数，并返回一个新的Promise。返回的新 Promise 在所有输入的 Promise 都成功完成时才会返回成功，并返回一个包含所有结果的数组。如果任何一个 Promise 失败，Promise.all 会立即拒绝，并返回第一个失败的错误Promise.allSettledPromise.allSettled 方法接受一个 Promise 数组作为参数，并返回一个新的 Promise。这个新的 Promise 在所有输入的 Promise 都完成（无论是成功还是失败）时才会返回成功，并返回一个包含每个 Promise 状态和结果的数组。使用 async/await 和 Promise.all结合 async/await 和 Promise.all，可以使代码更加简洁和易读promise批处理并发请求的案例如下:asyncfunctionfetchBatch(urls,batchSize){constresults=[];construnningPromises=[];for(leti=0;iurls.length;i++){consturl=urls[i];constpromise=fetch(url).then(res=res.json());results.push(promise);// 汇总所有请求结果runningPromises.push(promise);//实时跟踪当前批次的运行状态if