Web-Dev-For-Beginners 浏览器扩展实战二调用 API 与使用 Local Storage 构建动态碳足迹追踪器【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-BeginnersWeb-Dev-For-Beginners 项目 Building a browser extension 模块的第二课聚焦于把静态 HTML 表单升级为动态应用接入 CO2 Signal API 获取真实环境数据并通过localStorage持久化用户设置。读完本篇你将完整掌握 DOM 引用、事件监听、异步fetch、本地存储与错误处理在浏览器扩展中的落地组合方式并能基于 仓库完整实现 复现一个可运行的 CO₂ 足迹追踪扩展。课程背景从静态表单到动态扩展上一课All about Browsers完成了扩展的界面与开发环境搭建但此时的表单是静态的——它不会请求任何数据也不会记住任何状态。本课要做的就是像 Apollo 任务控制计算机那样让扩展具备动态行为连接互联网、拉取真实环境数据、记住用户配置。整个模块的目标产品是 Carbon Trigger 扩展用户输入 API Key 与区域代码后扩展调用 CO2 Signal API 查询该地区电力碳排放强度carbon intensity与化石燃料占比帮助用户判断何时适合运行洗衣机、烘干机等高耗电活动。完整成品位于 5-browser-extension/solution。图片来源说明本课文档展示了扩展运行界面的截图见 5-browser-extension/extension-screenshot.png安装过程可参考 5-browser-extension/install-on-edge.png。本课学习路径DOM 基础15 分钟querySelector引用元素、事件监听、状态管理基础本地存储20 分钟键值对持久化、会话管理、用户偏好保存表单处理25 分钟表单验证、阻止默认事件、数据提取、UI 状态切换API 集成35 分钟HTTP 请求、认证模式、JSON 解析、响应处理异步编程40 分钟Promise、async/await、错误处理、非阻塞操作错误处理30 分钟try/catch、友好错误信息、优雅降级、调试技巧第一步建立元素引用DOM ReferencesJavaScript 要操作界面必须先拿到目标 HTML 元素的引用。类比而言就像伽利略要研究木星卫星得先把望远镜对准木星。在index.js中用const变量捕获每个关键表单元素的引用// form fields const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // results const errors document.querySelector(.errors); const loading document.querySelector(.loading); const results document.querySelector(.result-container); const usage document.querySelector(.carbon-usage); const fossilfuel document.querySelector(.fossil-fuel); const myregion document.querySelector(.my-region); const clearBtn document.querySelector(.clear-btn);这段代码做了什么用document.querySelector() CSS 类选择器捕获表单元素建立指向区域名与API Key输入框的引用连接用于展示碳排放数据的输出元素.carbon-usage、.fossil-fuel、.my-region配置对加载指示器.loading、错误提示.errors等 UI 元素的访问把每个元素引用存入const变量便于全代码复用。在仓库的起步脚手架 5-browser-extension/start/src/index.js 中第一部分注释//1 form fields / results divs正是要求你在这里补全这些引用。第二步添加事件监听器事件监听器是代码感知用户操作的方式——就像早期电话总机的接线员时刻监听来电并按需接通线路。本课需要两个监听器外加一个初始化调用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();为表单添加submit监听用户按回车或点击提交时触发为清空按钮绑定click监听用于重置表单状态事件对象(e)被传给处理函数以便调用e.preventDefault()等控制方法立即调用init()建立扩展的初始状态。✅ 这里用了箭头函数简写比传统函数表达式更简洁两者功能等价。本课之后的完整代码如solution版则采用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e));后跟init();的同样模式。自测如果在表单提交时忘记调用e.preventDefault()会发生什么答案页面会重新加载所有 JavaScript 状态丢失用户体验被打断。——这正是本课反复强调阻止默认行为的原因。第三步构建初始化与重置函数init()如同船只的导航系统检查当前状态并相应调整界面——判断用户是否使用过本扩展若使用过则加载其上次的设置。reset()则给用户重新开始的机会类似科学家在实验间隙重置仪器以保证数据干净。function init() { // Check if the user has previously saved API credentials const storedApiKey localStorage.getItem(apiKey); const storedRegion localStorage.getItem(regionName); // Set extension icon to generic green (placeholder for future lesson) // TODO: Implement icon update in next lesson if (storedApiKey null || storedRegion null) { // First-time user: show setup form form.style.display block; results.style.display none; loading.style.display none; clearBtn.style.display none; errors.textContent ; } else { // Returning user: load saved data automatically displayCarbonUsage(storedApiKey, storedRegion); results.style.display none; form.style.display none; clearBtn.style.display block; } } function reset(e) { e.preventDefault(); // Clear stored region to allow user to select a new location localStorage.removeItem(regionName); // Restart initialization process init(); }详细过程从浏览器本地存储读取已保存的 API Key 和区域判断是首次用户无数据还是回访用户有数据首次用户显示设置表单并隐藏其他界面元素回访用户自动加载已存数据并显示重置选项根据可用数据管理 UI 状态。Local Storage 关键概念跨浏览器会话持久化数据区别于 Session Storage后者在会话结束即失效以键值对工作核心方法为getItem()与setItem()键不存在时返回null是记住用户偏好与设置的最简单方式。浏览器存储原理localStorage是扩展的长期记忆。即使浏览器关闭、电脑重启、浏览器崩溃数据依然保留且访问无需网络延迟。⚠️重要说明浏览器扩展拥有独立隔离的本地存储与普通网页的存储分开这保证了安全性并避免与其他网站冲突。你可以打开开发者工具F12→Application标签 → 展开Local Storage面板查看已存数据。⚠️安全提示在生产应用中把 API Key 存入 localStorage 存在安全风险JavaScript 可读取这些数据。本课为教学目的采用此方案是合理的但真实应用应将敏感凭据安全地存储在服务端。第四步处理表单提交浏览器默认会在表单提交时刷新页面我们通过拦截默认行为来获得更流畅的单页应用体验function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); }本步要点阻止表单默认行为触发页面重载从 API Key 和区域输入框提取用户输入值将表单数据传给setUpUser()做进一步处理全程保持单页应用行为无需刷新页面。✅ 注意HTML 表单字段带有required属性因此浏览器会在执行此函数前自动验证用户是否同时填入了 API Key 与区域。你可以在 5-browser-extension/solution/README.md 的成品代码构建指引中找到表单界面说明。第五步保存用户设置setUpUsersetUpUser负责保存用户数据并启动首次 API 调用完成从设置到结果显示的平滑过渡function setUpUser(apiKey, regionName) { // Save user credentials for future sessions localStorage.setItem(apiKey, apiKey); localStorage.setItem(regionName, regionName); // Update UI to show loading state loading.style.display block; errors.textContent ; clearBtn.style.display block; // Fetch carbon usage data using the users credentials displayCarbonUsage(apiKey, regionName); }逐步解析将 API Key 与区域名存入本地存储供后续会话使用显示加载指示器告知用户正在获取数据清除此前显示的错误信息显示清空按钮方便用户稍后重置发起 API 调用获取真实碳排放数据。对照仓库实现5-browser-extension/solution/src/index.js 中的setUpUser采用async函数声明其余逻辑与本课一致存储键名为apiKey与region并额外包含后续课程的图标更新逻辑。第六步理解 API 与异步编程什么是 APIAPIApplication Programming Interface是不同应用之间通信的方式。类比 19 世纪的电报系统操作员向远方站点发送请求然后收到包含所需信息的回复。你每次使用社交媒体、询问语音助手或使用外卖应用背后都是 API 在交换数据。REST API 关键概念REST 即 Representational State Transfer表征状态转移使用标准 HTTP 方法GET、POST、PUT、DELETE与数据交互返回可预测格式的数据通常是 JSON通过一致的、基于 URL 的端点提供不同类型的请求。为什么需要 async/awaitasync/await让代码在等待网络请求时不冻结界面——就像空中交通管制不会因为等一架飞机回应就停掉所有航班。核心优势数据加载期间扩展保持响应网络请求进行时其他代码可以继续运行相比传统回调模式可读性更好网络异常时可优雅地处理错误。日常类比点餐你不会守在厨房门口——拿好小票先去做别的事发邮件邮件应用不会在发送时冻结——你可以继续写新邮件加载网页图片逐步加载而你已能阅读文字。第七步调用 CO2 Signal API 并展示数据现在把扩展接入外部数据源。本课使用的 CO2 Signal API 提供全球电网的实时碳强度数据用户因此能理解其用电行为对环境的影响。// Modern fetch API approach (no external dependencies required) async function displayCarbonUsage(apiKey, region) { try { // Fetch carbon intensity data from the CO2 Signal API const response await fetch(https://api.co2signal.com/v1/latest, { method: GET, headers: { auth-token: apiKey, Content-Type: application/json }, // Add query parameters for the specific region ...new URLSearchParams({ countryCode: region }) { url: https://api.co2signal.com/v1/latest?countryCode${region} } }); // Check if the API request was successful if (!response.ok) { throw new Error(API request failed: ${response.status}); } const data await response.json(); const carbonData data.data; // Calculate rounded carbon intensity value const carbonIntensity Math.round(carbonData.carbonIntensity); // Update UI with fetched data loading.style.display none; form.style.display none; myregion.textContent region.toUpperCase(); usage.textContent ${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour); fossilfuel.textContent ${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity); results.style.display block; // TODO: calculateColor(carbonIntensity) - implement in next lesson } catch (error) { console.error(Error fetching carbon data:, error); // Show user-friendly error message loading.style.display none; results.style.display none; errors.textContent Sorry, we couldn\t fetch data for that region. Please check your API key and region code.; } }技术细节使用现代fetch()API 而非 axios 等外部库代码干净、零依赖通过response.ok做健壮的错误检查提前发现 API 错误用async/await处理异步流程可读性更好通过auth-token请求头向 CO2 Signal API 认证解析 JSON 响应并提取碳强度信息用格式化后的环境数据更新多个 UI 元素API 失败时展示用户友好的错误提示。本段演示的现代 JavaScript 概念模板字面量用${}语法做整洁的字符串拼接try/catch 错误处理构建健壮应用async/await 模式优雅地发起网络请求可选链与对象解构从 API 响应中提取特定数据方法链连续执行多个 DOM 操作。对照仓库实现5-browser-extension/solution/src/index.js 中的displayCarbonUsage采用 axios 方案axios.get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey } })并在渲染前对data.carbonIntensity、data.fossilFuelPercentage做了空值校验if (data?.carbonIntensity null || data?.fossilFuelPercentage null) throw new Error(...)同时调用了本课 TODO 中预留的calculateColor(CO2)更新扩展图标——这正是下一课Background tasks and performance要完成的动态图标功能。两种方案fetch 与 axios在学习上互为印证生产中使用哪个取决于项目依赖偏好。错误处理流程当 API 请求失败时网络失败 → 显示网络错误响应非 OK → 显示 API 错误JSON 解析失败/数据无效 → 显示数据错误最终统一隐藏加载指示器并展示友好错误信息。验证运行与调试构建与安装确保已安装 npmengines要求 npm ≥ 9.0.0、Node ≥ 18.0.0见 5-browser-extension/solution/package.json在 solution 目录执行npm install安装依赖webpack 与 axios执行npm run build用 webpack 打包产出dist目录打开浏览器扩展管理页Edge 右上角三点菜单 → 扩展选择加载解压缩的扩展指向dist文件夹通过 CO2 Signal 官网 邮箱获取 API Key并对照 Electricity Map 的区域代码例如波士顿使用US-NEISO填入表单。检查存储与网络打开 F12 开发者工具 →Application→Local Storage可查看已保存的apiKey与regionName键值打开Network标签可观察表单提交时发往api.co2signal.com的 GET 请求及其auth-token头与countryCode参数在 Console 中直接执行localStorage.setItem(apiKey,xxx)/localStorage.getItem(apiKey)验证持久化行为。进阶挑战Copilot Agent 挑战用 Agent 模式增强本课代码1为失败的 API 调用添加带指数退避的重试机制2在 API 调用前做区域代码输入校验3带进度指示器的加载动画4将 API 响应缓存进 localStorage 并带过期时间戳缓存 30 分钟5展示历史调用数据的函数6为所有函数参数与返回值补充 JSDoc 注释。领养一个 API课后作业任务要求详见 5-browser-extension/2-forms-browsers-local-storage/assignment.md从公开 API 列表如 Dog CEO、OpenWeatherMap、Quotable、NewsAPI、Numbers API中选一个构建解决真实问题或提供实用功能的浏览器扩展。必备特性包括API 参数表单输入、带错误处理的 API 集成、用户偏好/API Key 的本地存储、干净响应式的 UI、加载状态与用户反馈代码要求使用 ES6、async/await、try/catch 错误处理、有意义的注释与一致的代码风格。评分标准从 API 集成、代码质量、用户体验、本地存储、文档五个维度打分。本课收获总结完成本课后你已具备DOM 能力精准定位与操作元素存储专长用 localStorage 做持久化数据管理API 集成实时数据获取与认证异步编程现代 JavaScript 非阻塞流程错误处理构建优雅容错的健壮应用用户体验加载状态、验证与流畅交互现代模式fetch API、async/await 与 ES6 特性。这些技能广泛适用于单页 Web 应用、移动端 API 驱动应用、Electron 桌面软件、企业级系统的认证/缓存/错误处理以及 React/Vue/Angular 等现代框架的数据管理模式。下一步可以探索缓存策略、WebSocket 实时连接或复杂状态管理——对应的图标更新功能将在下一课 Background tasks and performance 中实现。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web-Dev-For-Beginners 浏览器扩展实战（二）：调用 API 与使用 Local Storage 构建动态碳足迹追踪器
Web-Dev-For-Beginners 浏览器扩展实战二调用 API 与使用 Local Storage 构建动态碳足迹追踪器【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-BeginnersWeb-Dev-For-Beginners 项目 Building a browser extension 模块的第二课聚焦于把静态 HTML 表单升级为动态应用接入 CO2 Signal API 获取真实环境数据并通过localStorage持久化用户设置。读完本篇你将完整掌握 DOM 引用、事件监听、异步fetch、本地存储与错误处理在浏览器扩展中的落地组合方式并能基于 仓库完整实现 复现一个可运行的 CO₂ 足迹追踪扩展。课程背景从静态表单到动态扩展上一课All about Browsers完成了扩展的界面与开发环境搭建但此时的表单是静态的——它不会请求任何数据也不会记住任何状态。本课要做的就是像 Apollo 任务控制计算机那样让扩展具备动态行为连接互联网、拉取真实环境数据、记住用户配置。整个模块的目标产品是 Carbon Trigger 扩展用户输入 API Key 与区域代码后扩展调用 CO2 Signal API 查询该地区电力碳排放强度carbon intensity与化石燃料占比帮助用户判断何时适合运行洗衣机、烘干机等高耗电活动。完整成品位于 5-browser-extension/solution。图片来源说明本课文档展示了扩展运行界面的截图见 5-browser-extension/extension-screenshot.png安装过程可参考 5-browser-extension/install-on-edge.png。本课学习路径DOM 基础15 分钟querySelector引用元素、事件监听、状态管理基础本地存储20 分钟键值对持久化、会话管理、用户偏好保存表单处理25 分钟表单验证、阻止默认事件、数据提取、UI 状态切换API 集成35 分钟HTTP 请求、认证模式、JSON 解析、响应处理异步编程40 分钟Promise、async/await、错误处理、非阻塞操作错误处理30 分钟try/catch、友好错误信息、优雅降级、调试技巧第一步建立元素引用DOM ReferencesJavaScript 要操作界面必须先拿到目标 HTML 元素的引用。类比而言就像伽利略要研究木星卫星得先把望远镜对准木星。在index.js中用const变量捕获每个关键表单元素的引用// form fields const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // results const errors document.querySelector(.errors); const loading document.querySelector(.loading); const results document.querySelector(.result-container); const usage document.querySelector(.carbon-usage); const fossilfuel document.querySelector(.fossil-fuel); const myregion document.querySelector(.my-region); const clearBtn document.querySelector(.clear-btn);这段代码做了什么用document.querySelector() CSS 类选择器捕获表单元素建立指向区域名与API Key输入框的引用连接用于展示碳排放数据的输出元素.carbon-usage、.fossil-fuel、.my-region配置对加载指示器.loading、错误提示.errors等 UI 元素的访问把每个元素引用存入const变量便于全代码复用。在仓库的起步脚手架 5-browser-extension/start/src/index.js 中第一部分注释//1 form fields / results divs正是要求你在这里补全这些引用。第二步添加事件监听器事件监听器是代码感知用户操作的方式——就像早期电话总机的接线员时刻监听来电并按需接通线路。本课需要两个监听器外加一个初始化调用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();为表单添加submit监听用户按回车或点击提交时触发为清空按钮绑定click监听用于重置表单状态事件对象(e)被传给处理函数以便调用e.preventDefault()等控制方法立即调用init()建立扩展的初始状态。✅ 这里用了箭头函数简写比传统函数表达式更简洁两者功能等价。本课之后的完整代码如solution版则采用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e));后跟init();的同样模式。自测如果在表单提交时忘记调用e.preventDefault()会发生什么答案页面会重新加载所有 JavaScript 状态丢失用户体验被打断。——这正是本课反复强调阻止默认行为的原因。第三步构建初始化与重置函数init()如同船只的导航系统检查当前状态并相应调整界面——判断用户是否使用过本扩展若使用过则加载其上次的设置。reset()则给用户重新开始的机会类似科学家在实验间隙重置仪器以保证数据干净。function init() { // Check if the user has previously saved API credentials const storedApiKey localStorage.getItem(apiKey); const storedRegion localStorage.getItem(regionName); // Set extension icon to generic green (placeholder for future lesson) // TODO: Implement icon update in next lesson if (storedApiKey null || storedRegion null) { // First-time user: show setup form form.style.display block; results.style.display none; loading.style.display none; clearBtn.style.display none; errors.textContent ; } else { // Returning user: load saved data automatically displayCarbonUsage(storedApiKey, storedRegion); results.style.display none; form.style.display none; clearBtn.style.display block; } } function reset(e) { e.preventDefault(); // Clear stored region to allow user to select a new location localStorage.removeItem(regionName); // Restart initialization process init(); }详细过程从浏览器本地存储读取已保存的 API Key 和区域判断是首次用户无数据还是回访用户有数据首次用户显示设置表单并隐藏其他界面元素回访用户自动加载已存数据并显示重置选项根据可用数据管理 UI 状态。Local Storage 关键概念跨浏览器会话持久化数据区别于 Session Storage后者在会话结束即失效以键值对工作核心方法为getItem()与setItem()键不存在时返回null是记住用户偏好与设置的最简单方式。浏览器存储原理localStorage是扩展的长期记忆。即使浏览器关闭、电脑重启、浏览器崩溃数据依然保留且访问无需网络延迟。⚠️重要说明浏览器扩展拥有独立隔离的本地存储与普通网页的存储分开这保证了安全性并避免与其他网站冲突。你可以打开开发者工具F12→Application标签 → 展开Local Storage面板查看已存数据。⚠️安全提示在生产应用中把 API Key 存入 localStorage 存在安全风险JavaScript 可读取这些数据。本课为教学目的采用此方案是合理的但真实应用应将敏感凭据安全地存储在服务端。第四步处理表单提交浏览器默认会在表单提交时刷新页面我们通过拦截默认行为来获得更流畅的单页应用体验function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); }本步要点阻止表单默认行为触发页面重载从 API Key 和区域输入框提取用户输入值将表单数据传给setUpUser()做进一步处理全程保持单页应用行为无需刷新页面。✅ 注意HTML 表单字段带有required属性因此浏览器会在执行此函数前自动验证用户是否同时填入了 API Key 与区域。你可以在 5-browser-extension/solution/README.md 的成品代码构建指引中找到表单界面说明。第五步保存用户设置setUpUsersetUpUser负责保存用户数据并启动首次 API 调用完成从设置到结果显示的平滑过渡function setUpUser(apiKey, regionName) { // Save user credentials for future sessions localStorage.setItem(apiKey, apiKey); localStorage.setItem(regionName, regionName); // Update UI to show loading state loading.style.display block; errors.textContent ; clearBtn.style.display block; // Fetch carbon usage data using the users credentials displayCarbonUsage(apiKey, regionName); }逐步解析将 API Key 与区域名存入本地存储供后续会话使用显示加载指示器告知用户正在获取数据清除此前显示的错误信息显示清空按钮方便用户稍后重置发起 API 调用获取真实碳排放数据。对照仓库实现5-browser-extension/solution/src/index.js 中的setUpUser采用async函数声明其余逻辑与本课一致存储键名为apiKey与region并额外包含后续课程的图标更新逻辑。第六步理解 API 与异步编程什么是 APIAPIApplication Programming Interface是不同应用之间通信的方式。类比 19 世纪的电报系统操作员向远方站点发送请求然后收到包含所需信息的回复。你每次使用社交媒体、询问语音助手或使用外卖应用背后都是 API 在交换数据。REST API 关键概念REST 即 Representational State Transfer表征状态转移使用标准 HTTP 方法GET、POST、PUT、DELETE与数据交互返回可预测格式的数据通常是 JSON通过一致的、基于 URL 的端点提供不同类型的请求。为什么需要 async/awaitasync/await让代码在等待网络请求时不冻结界面——就像空中交通管制不会因为等一架飞机回应就停掉所有航班。核心优势数据加载期间扩展保持响应网络请求进行时其他代码可以继续运行相比传统回调模式可读性更好网络异常时可优雅地处理错误。日常类比点餐你不会守在厨房门口——拿好小票先去做别的事发邮件邮件应用不会在发送时冻结——你可以继续写新邮件加载网页图片逐步加载而你已能阅读文字。第七步调用 CO2 Signal API 并展示数据现在把扩展接入外部数据源。本课使用的 CO2 Signal API 提供全球电网的实时碳强度数据用户因此能理解其用电行为对环境的影响。// Modern fetch API approach (no external dependencies required) async function displayCarbonUsage(apiKey, region) { try { // Fetch carbon intensity data from the CO2 Signal API const response await fetch(https://api.co2signal.com/v1/latest, { method: GET, headers: { auth-token: apiKey, Content-Type: application/json }, // Add query parameters for the specific region ...new URLSearchParams({ countryCode: region }) { url: https://api.co2signal.com/v1/latest?countryCode${region} } }); // Check if the API request was successful if (!response.ok) { throw new Error(API request failed: ${response.status}); } const data await response.json(); const carbonData data.data; // Calculate rounded carbon intensity value const carbonIntensity Math.round(carbonData.carbonIntensity); // Update UI with fetched data loading.style.display none; form.style.display none; myregion.textContent region.toUpperCase(); usage.textContent ${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour); fossilfuel.textContent ${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity); results.style.display block; // TODO: calculateColor(carbonIntensity) - implement in next lesson } catch (error) { console.error(Error fetching carbon data:, error); // Show user-friendly error message loading.style.display none; results.style.display none; errors.textContent Sorry, we couldn\t fetch data for that region. Please check your API key and region code.; } }技术细节使用现代fetch()API 而非 axios 等外部库代码干净、零依赖通过response.ok做健壮的错误检查提前发现 API 错误用async/await处理异步流程可读性更好通过auth-token请求头向 CO2 Signal API 认证解析 JSON 响应并提取碳强度信息用格式化后的环境数据更新多个 UI 元素API 失败时展示用户友好的错误提示。本段演示的现代 JavaScript 概念模板字面量用${}语法做整洁的字符串拼接try/catch 错误处理构建健壮应用async/await 模式优雅地发起网络请求可选链与对象解构从 API 响应中提取特定数据方法链连续执行多个 DOM 操作。对照仓库实现5-browser-extension/solution/src/index.js 中的displayCarbonUsage采用 axios 方案axios.get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey } })并在渲染前对data.carbonIntensity、data.fossilFuelPercentage做了空值校验if (data?.carbonIntensity null || data?.fossilFuelPercentage null) throw new Error(...)同时调用了本课 TODO 中预留的calculateColor(CO2)更新扩展图标——这正是下一课Background tasks and performance要完成的动态图标功能。两种方案fetch 与 axios在学习上互为印证生产中使用哪个取决于项目依赖偏好。错误处理流程当 API 请求失败时网络失败 → 显示网络错误响应非 OK → 显示 API 错误JSON 解析失败/数据无效 → 显示数据错误最终统一隐藏加载指示器并展示友好错误信息。验证运行与调试构建与安装确保已安装 npmengines要求 npm ≥ 9.0.0、Node ≥ 18.0.0见 5-browser-extension/solution/package.json在 solution 目录执行npm install安装依赖webpack 与 axios执行npm run build用 webpack 打包产出dist目录打开浏览器扩展管理页Edge 右上角三点菜单 → 扩展选择加载解压缩的扩展指向dist文件夹通过 CO2 Signal 官网 邮箱获取 API Key并对照 Electricity Map 的区域代码例如波士顿使用US-NEISO填入表单。检查存储与网络打开 F12 开发者工具 →Application→Local Storage可查看已保存的apiKey与regionName键值打开Network标签可观察表单提交时发往api.co2signal.com的 GET 请求及其auth-token头与countryCode参数在 Console 中直接执行localStorage.setItem(apiKey,xxx)/localStorage.getItem(apiKey)验证持久化行为。进阶挑战Copilot Agent 挑战用 Agent 模式增强本课代码1为失败的 API 调用添加带指数退避的重试机制2在 API 调用前做区域代码输入校验3带进度指示器的加载动画4将 API 响应缓存进 localStorage 并带过期时间戳缓存 30 分钟5展示历史调用数据的函数6为所有函数参数与返回值补充 JSDoc 注释。领养一个 API课后作业任务要求详见 5-browser-extension/2-forms-browsers-local-storage/assignment.md从公开 API 列表如 Dog CEO、OpenWeatherMap、Quotable、NewsAPI、Numbers API中选一个构建解决真实问题或提供实用功能的浏览器扩展。必备特性包括API 参数表单输入、带错误处理的 API 集成、用户偏好/API Key 的本地存储、干净响应式的 UI、加载状态与用户反馈代码要求使用 ES6、async/await、try/catch 错误处理、有意义的注释与一致的代码风格。评分标准从 API 集成、代码质量、用户体验、本地存储、文档五个维度打分。本课收获总结完成本课后你已具备DOM 能力精准定位与操作元素存储专长用 localStorage 做持久化数据管理API 集成实时数据获取与认证异步编程现代 JavaScript 非阻塞流程错误处理构建优雅容错的健壮应用用户体验加载状态、验证与流畅交互现代模式fetch API、async/await 与 ES6 特性。这些技能广泛适用于单页 Web 应用、移动端 API 驱动应用、Electron 桌面软件、企业级系统的认证/缓存/错误处理以及 React/Vue/Angular 等现代框架的数据管理模式。下一步可以探索缓存策略、WebSocket 实时连接或复杂状态管理——对应的图标更新功能将在下一课 Background tasks and performance 中实现。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考