在蓝桥杯 Web 应用开发赛项中异步编程是必考的核心内容。无论是处理用户交互、获取后端数据还是动态更新页面都离不开箭头函数、Promise和Fetch API的熟练运用。本文将系统梳理这三个知识点并通过代码实例与表格总结帮助你在备赛过程中牢牢掌握这些关键技能。一、箭头函数Arrow Function箭头函数是 ES6 引入的一种简洁的函数写法它不仅让代码更短还改变了this的指向规则在回调函数、事件监听等场景中尤为常用。1.1 基本语法形式语法示例无参数() { ... }() console.log(hello)一个参数x { ... }或(x) { ... }x x * 2多个参数(x, y) { ... }(a, b) a b函数体单行隐式返回(x, y) x y省略{}和return直接返回值函数体多行(x, y) { let sum x y; return sum; }必须写{}和return1.2 this 指向箭头函数没有自己的this它内部的this定义时所在上下文的this值而非调用时决定。这一点与普通函数截然不同。// 普通函数this 指向调用者 div.onclick function() { console.log(this); // div classdiv1.../div }; // 箭头函数this 指向外层作用域window div.onclick () { console.log(this); // window };1.3 应用场景数组方法map、filter、forEach的回调事件监听中需要保留外层thisPromise 链式调用中简化回调1.4 表格总结箭头函数核心特性特性说明代码示例语法简洁根据参数个数和函数体行数可省略括号、花括号、returnlet add (a,b) ab;无自己的 thisthis 继承自外层作用域setTimeout(() { console.log(this); }, 100);不能用作构造函数不能使用new调用new (() {})会报错没有arguments对象可用剩余参数代替(...args) console.log(args)不能作为生成器函数不支持yield-二、Promise 对象Promise 是 ES6 提出的异步编程解决方案它代表一个异步操作的最终完成或失败及其结果值解决了“回调地狱”问题。2.1 Promise 的三种状态pending进行中初始状态既未完成也未失败。fulfilled已成功操作成功调用resolve。rejected已失败操作失败调用reject。2.2 创建 Promiseconst promise new Promise((resolve, reject) { // 异步操作 if (/* 成功条件 */) { resolve(成功的数据); } else { reject(失败的原因); } });2.3 链式调用then()方法接收两个回调第一个处理成功第二个处理失败可选。catch()专门处理失败。finally()无论成败都会执行。fetchData() .then(response response.json()) .then(data console.log(data)) .catch(error console.error(error)) .finally(() console.log(请求结束));2.4 解决回调地狱传统异步嵌套ajax1(() { ajax2(() { ajax3(() { // 最终逻辑 }); }); });用 Promise 改写ajax1() .then(() ajax2()) .then(() ajax3()) .then(() { // 最终逻辑 }) .catch(err console.error(err));2.5 表格总结Promise 核心 API方法作用示例new Promise(executor)创建一个 Promise 实例new Promise((resolve,reject){...})promise.then(onFulfilled, onRejected)注册成功和失败回调返回新 Promisepromise.then(data{}, err{})promise.catch(onRejected)仅处理失败相当于then(null, onRejected)promise.catch(err{})promise.finally(onFinally)无论成败都执行不改变结果promise.finally((){})Promise.resolve(value)返回一个已成功的 PromisePromise.resolve(42)Promise.reject(reason)返回一个已失败的 PromisePromise.reject(error)Promise.all(iterable)所有 Promise 成功才成功返回结果数组Promise.all([p1, p2])Promise.race(iterable)第一个结束的 Promise 决定结果Promise.race([p1, p2])三、Fetch APIFetch API 提供了全局fetch()方法用于发起网络请求它返回一个 Promise因此天然支持异步流程控制比传统的XMLHttpRequest更简洁、强大。3.1 基本 GET 请求fetch(./carList.json) // 返回 PromiseResponse .then(response { if (response.ok) { // 响应状态码 200-299 return response.json(); // 解析 JSON返回 Promise } else { throw new Error(HTTP error! status: ${response.status}); } }) .then(data { console.log(data); // 处理解析后的数据 }) .catch(error { console.error(请求失败:, error); });3.2 响应对象常用方法方法作用返回值类型response.json()将响应体解析为 JSONPromiseresponse.text()将响应体解析为文本Promiseresponse.blob()将响应体解析为 Blob 对象Promiseresponse.formData()将响应体解析为 FormDataPromiseresponse.arrayBuffer()将响应体解析为 ArrayBufferPromise3.3 请求配置POST 等fetch(https://api.example.com/data, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ name: 张三, age: 20 }), }) .then(response response.json()) .then(data console.log(data)) .catch(err console.error(err));3.4 错误处理网络故障如断网会触发catch。HTTP 状态码非 2xx 时response.ok为false需手动抛出错误。3.5 表格总结Fetch API 要点要点说明示例返回值fetch()返回一个 Promiseresolve 值为 Response 对象const promise fetch(url);请求选项第二个参数可配置 method、headers、body 等fetch(url, { method: POST, body: data })解析响应需调用response.json()等方法才能获得实际数据response.json()返回 Promise超时控制Fetch 本身不支持超时可用AbortController实现const controller new AbortController(); signal: controller.signal跨域遵循同源策略需服务器支持 CORS-四、综合实例动态渲染汽车列表下面结合箭头函数、Promise 和 Fetch实现一个从 JSON 文件获取数据并渲染到页面的完整示例源自题干代码。div idlist/div script // 使用 fetch 请求数据返回 Promise fetch(./carList.json) .then(response { if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } return response.json(); // 返回解析后的数据 Promise }) .then(data { const list document.querySelector(#list); // 使用箭头函数遍历数据动态创建 DOM 元素 data.forEach(rowData { const item document.createElement(div); item.className item; item.innerHTML img src${rowData.img} alt classitem-img div classitem-info div classitem-name${rowData.name}/div div classitem-price${rowData.price}/div /div ; list.appendChild(item); }); }) .catch(error { console.error(请求失败:, error.message); }); /script考点解析箭头函数简化回调then和forEach中。Promise 链式调用处理异步。Fetch 获取远程数据结合 DOM 操作动态更新页面。错误处理增强健壮性。五、蓝桥杯 Web 考点关联与备考建议5.1 常考题型异步数据获取要求使用 Fetch 或 Axios 获取 API 数据并渲染到表格或列表中。事件处理与 this 指向考察箭头函数在事件监听中保持外层this的场景。Promise 链式调用给定多个异步任务要求按顺序执行并处理结果。错误捕获要求对网络请求进行错误处理并显示友好提示。5.2 备考要点考点掌握程度练习建议箭头函数的简写与 this熟练对比普通函数与箭头函数在事件、定时器中的表现Promise 的三种状态与 API理解并能手写实现简单的 Promise 封装练习Promise.allFetch 的基本用法熟练使用在线 API如 jsonplaceholder练习 GET/POST 请求异步与 DOM 结合综合应用完成一个完整的“请求数据→渲染页面”小项目六、总结箭头函数、Promise 和 Fetch API 是现代 Web 开发的三把利剑。它们让异步代码更加优雅、可读、易于维护。在蓝桥杯 Web 赛项中这些知识点几乎贯穿所有考题。通过本文的梳理希望你能建立起清晰的知识框架并结合表格与代码实例加深理解在比赛中从容应对异步编程相关题目。