Web-Dev-For-Beginners「Adopt an API」作业解析构建调用外部 API 并使用 LocalStorage 的浏览器扩展【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文以 Web-Dev-For-Beginners 课程浏览器扩展项目5-browser-extension第二课的作业文档「Adopt an API」Adopt an API意为采纳一个 API为主体完整拆解该作业从选型、规划、构建到测试、提交与评分的全流程要求并结合仓库中的 Carbon Trigger 参考实现与构建配置让你掌握如何用现代 JavaScriptES6、async/await、fetch/axios、localStorage独立完成一个能调用真实外部 API、带本地持久化和错误处理的浏览器扩展。一、作业背景它在课程中的位置该作业是 5-browser-extension 项目第二课2-forms-browsers-local-storage的结课任务。按照 课程 README 给出的学习旅程mermaid journey 图学生在第一节课已经搭好一个带表单的扩展骨架第二节课要完成三件事用document.querySelector建立 DOM 引用并注册事件监听用localStorage保存用户偏好API Key 与区域代码用异步代码调用 CO2 Signal API 拉取实时碳强度数据并处理加载态与错误。「Adopt an API」作业正是把这套技能从课程指定的 CO2 Signal 数据源泛化到任意一个你自选的公开 API检验你是否真正掌握了表单、API 集成与本地存储这三项能力。作业原文位于 assignment.md印地语译文即 assignment.hi.md。二、第一步选择你的 API作业要求你从社区维护的免费公开 API 清单public-apis 仓库中挑选一个 API并构建一个解决实际问题或提供有价值功能的浏览器扩展。原文给出了一组对初学者友好的候选方向按类别娱乐类Dog CEO API随机狗狗图片——这是印地语版作业中明确点名的小问题示例适合练手天气类OpenWeatherMap实时天气数据名言类Quotable API励志名言新闻类NewsAPI当前头条趣味类Numbers API数字冷知识。选型时作业给出的隐含判据是解决一个真实的哪怕很轻的问题。印地语版原文直接说它可以只是宠物图片不够看这样的小问题——用 Dog CEO API 即可也可以用更大的 API重点是动手去做、享受过程。结合仓库的佐证课程自带的 Carbon Trigger 扩展选用的就是 CO2 Signal API碳强度数据源它的选型逻辑在 start/README.md 中写得很清楚做一个常驻浏览器栏的提醒点让你在决定做高能耗活动比如跑大型渲染、下大文件前先看看所在区域电网当前的碳重程度。这示范了作业要求的第一步先明确这个扩展帮用户解决什么判断难题再反推需要哪个 API。三、第二步编码前的四个规划问题作业要求在写任何代码之前先回答四个规划问题你的扩展解决什么问题目标用户是谁你要在本地存储local storage中保存什么数据如何处理 API 失败或速率限制rate limit这四个问题分别对应后文的功能要求表单与存储、体验要求和错误处理要求是评分时文档/README 说明一栏的素材来源。四、第三步构建扩展——功能要求与代码要求4.1 必须实现的功能作业列出的五个必做功能Required Features表单输入为所需 API 参数提供表单输入API 集成带完善的错误处理本地存储保存用户偏好或 API Key界面干净、响应式的用户界面反馈加载状态loading state与用户反馈。4.2 代码层面的硬性要求使用现代 JavaScriptES6特性API 调用必须使用async/await包含try/catch错误处理添加有实际意义的注释解释代码保持一致的代码格式化。参考实现逐条印证仓库中 solution/src/index.js 可以逐条对照上述要求是满分答卷的样板DOM 引用与事件监听对应课程 README 的Setup DOM references / Add event listeners// 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);文件末尾L125-L129注册监听并启动应用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); //start app init();API 集成 async/await try/catchdisplayCarbonUsage 用 axios 发起带auth-token请求头的 GET 请求在try块中完成请求、数据校验与 UI 更新在catch块中给出用户友好的错误文案const displayCarbonUsage async (apiKey, region) { try { await axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, }) .then((response) { const data response?.data?.data; // ✅ Validate required data before using if (data?.carbonIntensity null || data?.fossilFuelPercentage null) { throw new Error(Missing carbon intensity or fossil fuel data); } // ... 更新 loading/form/results 的显示与文本 ... }); } catch (error) { console.warn(Data fetch failed:, error.message); loading.style.display none; results.style.display none; errors.textContent Sorry, data unavailable for the selected region.; } };注意其中无效 API 响应的兜底即便 HTTP 成功只要carbonIntensity或fossilFuelPercentage缺失就主动throw这正好覆盖作业Test and Polish中invalid API responses的边界情形。本地存储保存偏好setUpUser 在保存凭据的同时切换 UI 状态显示 loading、清空错误、显示清除按钮然后发起首次数据请求const setUpUser async (apiKey, region) { localStorage.setItem(apiKey, apiKey); localStorage.setItem(region, region); loading.style.display block; errors.textContent ; clearBtn.style.display block; //make initial call displayCarbonUsage(apiKey, region); };表单提交拦截handleSubmit 用e.preventDefault()阻止页面刷新再取apiKey.value与region.value交给setUpUser——即单页行为的实现方式。而 start/src/index.js 是学生动手的填空模板按注释编号//1到//6依次填入表单字段引用、监听器注册、初始化检查、表单提交处理、用户凭据设置和 API 调用与课程 README 中按编号段落放置代码的指引一一对应。五、第四步测试与打磨作业对测试提出四条检查项用各种输入组合测试扩展处理边界情形断网、无效 API 响应确保浏览器重启后扩展仍然可用——这验证的正是 localStorage 的跨会话持久性添加用户友好的错误信息。关于浏览器重启后仍可用参考实现的 init 函数 给出了标准答案启动时先读localStorage.getItem(apiKey)与localStorage.getItem(region)若任一为null则显示设置表单首次用户否则直接隐藏表单、显示清除按钮并用已存的凭据自动调用displayCarbonUsage回访用户。reset 函数 则removeItem(region)后重新init()回到首次配置流程。这条存储 → 初始化 → 自动拉数的闭环就是重启后体验不丢的关键。如何在浏览器中验证存储按课程 README 的说法按 F12 打开开发者工具进入Application标签页展开Local Storage分节即可看到键值对本扩展存的是apiKey与region两个键。同时课程 README 给出两条重要提示作业实践者应同样遵守浏览器扩展拥有独立于普通网页的隔离 localStorage避免与其他站点冲突安全提醒生产应用中把 API Key 存进 localStorage 存在风险页内 JavaScript 可读取该数据学习目的无妨真实产品应把敏感凭据放到服务端安全存储。六、构建与安装把扩展真正跑起来仓库为每个学生提供了可直接构建的脚手架start/目录构建链路在 start/package.json 中定义运行环境要求node 18.0.0、npm 9.0.0依赖axios ^1.15.0运行时webpack ^5.105.0与webpack-cli开发依赖脚本npm run build执行 webpack、npm run watchwebpack --watch 热构建。按 start/README.md 的操作步骤npm install安装依赖npm run build用 webpack 打包出dist目录在 Edge 中通过右上角三点菜单进入扩展面板选择Load Unpacked指向dist文件夹即可加载扩展课程截图 install-on-edge.png 演示了这一界面运行时需要到 CO2 Signal 官网申请 API Key并用 Electricity Map 的区域代码如文档示例中波士顿对应US-NEISO填入扩展表单。提交作业时你的扩展同样需要达到可安装、可运行的状态——这正是提交要求第 1 条的验收口径。七、加分挑战Bonus Challenges作业鼓励在完成基本要求后继续进阶列出的五个加分项接入多个 API 端点实现更丰富的功能实现数据缓存减少 API 调用次数为常用操作添加键盘快捷键增加数据导出/导入功能提供用户自定义选项。对照课程 README 中的 GitHub Copilot Agent Challenge这些方向的具体化形态包括失败重试指数退避、调用前的区域代码校验、带进度指示的加载动画、带过期时间戳如 30 分钟的 localStorage 缓存、展示历史调用数据以及为所有函数参数与返回值编写 JSDoc 类型注释。八、提交要求与评分标准8.1 提交物清单可运行的浏览器扩展成功集成你所选的 APIREADME 文档需说明你选了哪个 API为什么扩展如何安装和使用需要哪些 API Key 或前置配置扩展运行截图整洁、有注释的代码遵循现代 JavaScript 实践。8.2 评分表Rubric标准优秀90-100%熟练80-89%发展中70-79%入门60-69%API 集成集成无瑕疵错误处理全面边界情形管理完善集成成功具备基础错误处理API 可用但错误处理有限API 集成存在明显问题代码质量整洁、注释完善的现代 JavaScript遵循最佳实践代码结构良好注释充分代码能运行但组织需改进代码质量差注释极少用户体验界面精致加载状态与用户反馈出色界面良好有基础用户反馈界面基本可用体验差界面令人困惑本地存储高级运用含数据校验与管理为核心功能正确实现本地存储基础的本地存储实现使用极少或实现错误文档README 全面含搭建说明与截图文档良好覆盖大部分要求基础文档缺少部分细节文档差或缺失印地语版作业给出的简化版评分口径与此一致完整提交一个使用所选 API 的完整浏览器扩展为足够Sufficient仅提交部分扩展为及格边缘提交物带错误则为需改进。九、起步建议与延伸阅读9.1 作业的 5 条起步建议Getting Started Tips从简单开始选一个不需要复杂鉴权的 API读文档彻底理解所选 API 的端点与响应结构先规划 UI编码前用草图画出扩展界面频繁测试增量构建每加一个功能就测一次处理错误始终假设 API 调用可能失败并据此设计。9.2 课程延伸浏览器内置 API完成本作业后课程 README 的 Challenge 部分引导你继续探索浏览器原生 API并各做一个小演示Geolocation API定位、Notification API桌面通知、HTML Drag and Drop API拖放交互、Web Storage API更高级的本地存储技巧、Fetch APIXMLHttpRequest的现代替代。配套的调研问题包括该 API 解决什么真实问题它如何处理错误与边界情形有何安全考量各浏览器支持度如何9.3 学习资源作业正文推荐查阅的资料方向为浏览器扩展WebExtensions官方文档、Fetch API 指南、LocalStorageWindow/localStorage教程、JSON 解析与处理参考均为 MDN 上的权威条目可按名称检索获取。十、自检清单提交前可对照以下问题自查源自课程 README 的 Pedagogical Check-in 与本作业要求能否解释addEventListener如何把用户动作映射到 JavaScript 函数为什么表单提交里必须e.preventDefault()答否则页面刷新丢失全部 JS 状态async/await为什么不会冻结扩展界面try/catch如何兜住网络错误断网、无效响应、浏览器重启三种情形下你的扩展分别表现如何你的 README 是否写清了 API 选择理由、安装步骤、Key 配置与运行截图按此清单逐项通过后你的Adopt an API提交就同时满足了作业的功能、代码、体验、存储与文档五个评分维度。【免费下载链接】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），仅供参考