基于 Web-Dev-For-Beginners 的实战作业指南Adopt an API——用外部 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-Beginners本作业是 Web-Dev-For-Beginners 教程中浏览器扩展项目第 2 课调用 API 并使用 Local Storage的配套实战任务选择一个外部 API把它领养进你自己的浏览器扩展让表单真正连接真实数据、让扩展拥有跨会话的记忆。完成本作业后你将掌握从 API 选型、扩展规划、前端实现ES6、async/await、try/catch、localStorage到测试打磨、文档交付的完整开发闭环并产出一个可加载进浏览器、可实际运行的数据驱动扩展。一、作业定位让静态表单活起来在开始本作业之前课程第 2 课已经带你完成了一个看似完整、实则静态的表单起始代码见 start/src/index.js其中仅有//1到//6的占位注释。本作业的核心目标正是把课程中演示的三大能力——DOM 操作、API 集成、Local Storage 持久化——迁移到你自选的 API 上API 集成让扩展通过 HTTP 请求与外部服务通信获取实时数据课程示例为 CO2 Signal API 的碳排放强度数据Local Storage把用户偏好如 API Key、地区代码持久化在浏览器中让扩展记得用户重启浏览器后依然生效异步编程与用户体验用async/await避免界面卡死用加载状态与友好错误提示打磨交互。课程的参考实现完整展示了这套模式见 solution/src/index.js你的作业就是在自选 API 上重现并扩展它。二、第一步选择你的 API作业要求从社区维护的免费公共 API 清单中挑选一个服务。选型时的核心原则是从简单开始——优先选择无需复杂鉴权、返回结构清晰的 API。课程为初学者推荐了以下五类热门选项类别推荐 API用途娱乐Dog CEO API返回随机狗狗图片天气OpenWeatherMap获取当前天气数据名言Quotable API返回励志名言新闻NewsAPI获取最新头条趣味事实Numbers API返回有趣的数字事实选型检查清单该 API 是否免费是否需要 API Key 或 OAuth 鉴权返回的是 JSON 还是其他格式接口是否有速率限制rate limit答案应记入你的规划文档后续所有错误处理设计都围绕它们展开。三、第二步规划你的扩展在动手写代码前作业要求你书面回答四个规划问题这是区分会写代码与会做产品的关键一步你的扩展解决什么问题例如课程示例解决我的地区用电碳排放强度有多高、此时适合做哪些高耗能活动目标用户是谁例如关注环保的日常用户、需要节能决策的上班族哪些数据要存入本地存储例如API Key、地区代码、上次查询结果注意区分该存的偏好与不该暴露的敏感信息如何应对 API 失败或请求频率限制例如重试机制、指数退避、友好降级提示、响应缓存从仓库的课程设计看这四问与课程第 2 课的状态机一一对应CheckStorage → FirstTime/Returning → ShowForm/LoadData → FetchAPI → ShowResults → Reset见 课程文档 中的状态图。规划阶段就把状态迁移想清楚实现阶段会顺畅得多。四、第三步构建你的扩展4.1 必选功能清单作业对扩展的功能下限有明确要求逐条对照如下表单字段为 API 必需的参数如地区代码、API Key提供输入控件API 集成与错误处理正确发起请求并妥善处理失败Local Storage持久化用户偏好或 API Key干净、响应式的用户界面加载状态与用户反馈请求期间显示 loading失败时显示错误信息。4.2 代码要求与课程参考实现对照作业对代码质量的要求恰好对应课程第 2 课在 solution/src/index.js 中示范的现代 JavaScript 实践建议逐条对照实现1. DOM 引用与事件监听现代 JavaScriptconst 箭头函数课程实现用document.querySelector()一次性捕获所有需要操作的页面元素并用箭头函数注册submit与click事件// form fields const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // ...errors/loading/results 等 UI 元素同理 form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init(); // 启动时立即执行初始化2. 异步 API 调用async/awaittry/catch课程参考实现基于 axios 与 CO2 Signal API展示了标准结构先 await 请求再校验响应、解析数据、更新 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; // 校验关键数据是否缺失 if (data?.carbonIntensity null || data?.fossilFuelPercentage null) { throw new Error(Missing carbon intensity or fossil fuel data); } // 更新 UI、隐藏 loading、显示结果 }); } catch (error) { console.warn(Data fetch failed:, error.message); errors.textContent Sorry, data unavailable for the selected region.; } };作业要求你改用原生fetch()课程文档中的教学示例即为fetchasync/await版本无需任何外部依赖但结构完全一致检查response.ok、await response.json()、用模板字符串格式化输出。请为你的自选 API 重写这段逻辑并为每个关键步骤添加有意义的注释。3. Local Storage 三件套setItem/getItem/removeItem课程实现展示了完整的持久化闭环保存setUpUserlocalStorage.setItem(apiKey, apiKey)localStorage.setItem(region, region)随后显示 loading、发起首次 API 调用读取与分流initlocalStorage.getItem(apiKey)与getItem(region)任一返回null即视为新用户展示设置表单否则视为老用户直接加载已保存数据——这正是扩展记得你的实现方式重置resetlocalStorage.removeItem(region)后重新执行init()回到首次使用状态。注意一个值得学习的细节reset只清除region而不清除apiKey因为 API Key 属于长期凭据地区才是用户想更换的偏好。4. 加载状态与用户反馈课程实现通过切换loading、results、form、clearBtn四个元素的style.display来管理界面状态请求发出时显示 loading成功后隐藏 loading 并展示结果失败时隐藏 loading 并写入errors.textContent的用户友好消息。你的扩展必须为每个异步操作提供同样的进行中 / 成功 / 失败三态反馈。5. 关于 localStorage 的安全边界课程文档特别提示生产环境中把 API Key 存入 Local Storage 存在安全风险因为页面 JavaScript 可以读取该数据。本作业属于教学场景此方案可正常使用但应在 README 中说明并注明真实应用应改用服务端安全存储。五、第四步测试与打磨作业要求你在交付前完成四类验证多样化输入测试不同格式的地区代码、空值、超长输入边界情况处理无网络连接、API 返回非预期结构课程实现用可选链data?.carbonIntensity null主动校验缺失字段并抛出错误这是值得照搬的防御式写法浏览器重启后验证重启后扩展应能从 localStorage 恢复用户偏好并自动加载数据对应init()的老用户分支友好错误消息所有失败路径都应呈现可读的提示而非控制台报错。测试通过后按课程说明执行npm run buildwebpack 打包脚本定义见 solution/package.json并在浏览器扩展管理页加载已解压的扩展程序选择dist目录完成加载。六、附加挑战加分项若基础功能完成作业给出了五条进阶方向任意实现 12 条即可显著拉开与基准版本的差距接入多个 API 端点丰富扩展功能实现数据缓存减少重复 API 调用可在 localStorage 中为响应附带时间戳实现带过期的缓存创建键盘快捷键覆盖常见操作增加数据导入/导出功能实现用户自定义选项。七、提交要求最终交付物为三部分缺一不可可运行的浏览器扩展成功与你选择的 API 完成集成README 文件至少说明选择了哪个 API 及原因、如何安装与使用扩展、所需的 API Key 或环境配置、扩展实际使用中的截图可参考仓库 start/README.md 的撰写风格整洁、带注释的代码遵循现代 JavaScript 实践。八、评分标准作业提供了一套五维评分量表这是自我评估的黄金标尺逐项对照可精准定位短板标准优秀 (90-100%)良好 (80-89%)发展中 (70-79%)入门 (60-69%)API 集成API 集成无懈可击错误处理全面且覆盖边界情况API 集成成功具备基础错误处理API 可用但错误处理有限API 集成存在明显问题代码质量遵循最佳实践的整洁、注释充分的现代 JavaScript代码结构良好注释足够代码可用但组织性有待提高代码质量差注释极少用户体验界面精致加载状态与用户反馈出色界面良好具备基础用户反馈界面基础功能勉强可用用户体验差界面令人困惑本地存储localStorage 运用成熟含数据校验与管理关键功能正确使用了本地存储本地存储实现基础本地存储使用极少或错误文档README 详尽含安装说明与截图文档良好覆盖大部分要求基础文档缺少部分细节文档差或缺失九、上手建议从简单开始选择无需复杂鉴权的 API先跑通主流程通读文档彻底理解所选 API 的端点与响应结构再动手写fetch先画 UI 草图写代码前在纸上规划界面布局与状态切换频繁测试增量构建每加一个功能就测一个功能默认失败始终假设 API 调用可能失败并据此设计降级路径。十、配套资源导航本作业的每一步都可在仓库中找到直接可参考的素材第 2 课完整课程文档DOM 引用、事件监听、init/reset、fetch async/await 的逐步教学代码本作业的最佳参考答案作业原文英文本作业的权威英文版本评分标准以它为准课程参考实现CO2 Signal API 的完整可运行实现含可选链数据校验与扩展图标颜色联动起始模板带编号占位注释的空骨架适合作为你的编码起点项目说明与安装流程npm 安装、webpack 构建、Edge 加载扩展、申请 API Key 的完整流程另可参阅 MDN 的浏览器扩展文档、Fetch API 指南、Local Storage 教程与 JSON 解析文档作为实现细节的标准参考。现在就选一个你感兴趣的 API把它领养进自己的浏览器扩展吧——既能解决问题又能把本课学到的 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），仅供参考 基于 Web-Dev-For-Beginners 的实战作业指南：Adopt an API——用外部 API 与 Local Storage 构建数据驱动的浏览器扩展
基于 Web-Dev-For-Beginners 的实战作业指南Adopt an API——用外部 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-Beginners本作业是 Web-Dev-For-Beginners 教程中浏览器扩展项目第 2 课调用 API 并使用 Local Storage的配套实战任务选择一个外部 API把它领养进你自己的浏览器扩展让表单真正连接真实数据、让扩展拥有跨会话的记忆。完成本作业后你将掌握从 API 选型、扩展规划、前端实现ES6、async/await、try/catch、localStorage到测试打磨、文档交付的完整开发闭环并产出一个可加载进浏览器、可实际运行的数据驱动扩展。一、作业定位让静态表单活起来在开始本作业之前课程第 2 课已经带你完成了一个看似完整、实则静态的表单起始代码见 start/src/index.js其中仅有//1到//6的占位注释。本作业的核心目标正是把课程中演示的三大能力——DOM 操作、API 集成、Local Storage 持久化——迁移到你自选的 API 上API 集成让扩展通过 HTTP 请求与外部服务通信获取实时数据课程示例为 CO2 Signal API 的碳排放强度数据Local Storage把用户偏好如 API Key、地区代码持久化在浏览器中让扩展记得用户重启浏览器后依然生效异步编程与用户体验用async/await避免界面卡死用加载状态与友好错误提示打磨交互。课程的参考实现完整展示了这套模式见 solution/src/index.js你的作业就是在自选 API 上重现并扩展它。二、第一步选择你的 API作业要求从社区维护的免费公共 API 清单中挑选一个服务。选型时的核心原则是从简单开始——优先选择无需复杂鉴权、返回结构清晰的 API。课程为初学者推荐了以下五类热门选项类别推荐 API用途娱乐Dog CEO API返回随机狗狗图片天气OpenWeatherMap获取当前天气数据名言Quotable API返回励志名言新闻NewsAPI获取最新头条趣味事实Numbers API返回有趣的数字事实选型检查清单该 API 是否免费是否需要 API Key 或 OAuth 鉴权返回的是 JSON 还是其他格式接口是否有速率限制rate limit答案应记入你的规划文档后续所有错误处理设计都围绕它们展开。三、第二步规划你的扩展在动手写代码前作业要求你书面回答四个规划问题这是区分会写代码与会做产品的关键一步你的扩展解决什么问题例如课程示例解决我的地区用电碳排放强度有多高、此时适合做哪些高耗能活动目标用户是谁例如关注环保的日常用户、需要节能决策的上班族哪些数据要存入本地存储例如API Key、地区代码、上次查询结果注意区分该存的偏好与不该暴露的敏感信息如何应对 API 失败或请求频率限制例如重试机制、指数退避、友好降级提示、响应缓存从仓库的课程设计看这四问与课程第 2 课的状态机一一对应CheckStorage → FirstTime/Returning → ShowForm/LoadData → FetchAPI → ShowResults → Reset见 课程文档 中的状态图。规划阶段就把状态迁移想清楚实现阶段会顺畅得多。四、第三步构建你的扩展4.1 必选功能清单作业对扩展的功能下限有明确要求逐条对照如下表单字段为 API 必需的参数如地区代码、API Key提供输入控件API 集成与错误处理正确发起请求并妥善处理失败Local Storage持久化用户偏好或 API Key干净、响应式的用户界面加载状态与用户反馈请求期间显示 loading失败时显示错误信息。4.2 代码要求与课程参考实现对照作业对代码质量的要求恰好对应课程第 2 课在 solution/src/index.js 中示范的现代 JavaScript 实践建议逐条对照实现1. DOM 引用与事件监听现代 JavaScriptconst 箭头函数课程实现用document.querySelector()一次性捕获所有需要操作的页面元素并用箭头函数注册submit与click事件// form fields const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // ...errors/loading/results 等 UI 元素同理 form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init(); // 启动时立即执行初始化2. 异步 API 调用async/awaittry/catch课程参考实现基于 axios 与 CO2 Signal API展示了标准结构先 await 请求再校验响应、解析数据、更新 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; // 校验关键数据是否缺失 if (data?.carbonIntensity null || data?.fossilFuelPercentage null) { throw new Error(Missing carbon intensity or fossil fuel data); } // 更新 UI、隐藏 loading、显示结果 }); } catch (error) { console.warn(Data fetch failed:, error.message); errors.textContent Sorry, data unavailable for the selected region.; } };作业要求你改用原生fetch()课程文档中的教学示例即为fetchasync/await版本无需任何外部依赖但结构完全一致检查response.ok、await response.json()、用模板字符串格式化输出。请为你的自选 API 重写这段逻辑并为每个关键步骤添加有意义的注释。3. Local Storage 三件套setItem/getItem/removeItem课程实现展示了完整的持久化闭环保存setUpUserlocalStorage.setItem(apiKey, apiKey)localStorage.setItem(region, region)随后显示 loading、发起首次 API 调用读取与分流initlocalStorage.getItem(apiKey)与getItem(region)任一返回null即视为新用户展示设置表单否则视为老用户直接加载已保存数据——这正是扩展记得你的实现方式重置resetlocalStorage.removeItem(region)后重新执行init()回到首次使用状态。注意一个值得学习的细节reset只清除region而不清除apiKey因为 API Key 属于长期凭据地区才是用户想更换的偏好。4. 加载状态与用户反馈课程实现通过切换loading、results、form、clearBtn四个元素的style.display来管理界面状态请求发出时显示 loading成功后隐藏 loading 并展示结果失败时隐藏 loading 并写入errors.textContent的用户友好消息。你的扩展必须为每个异步操作提供同样的进行中 / 成功 / 失败三态反馈。5. 关于 localStorage 的安全边界课程文档特别提示生产环境中把 API Key 存入 Local Storage 存在安全风险因为页面 JavaScript 可以读取该数据。本作业属于教学场景此方案可正常使用但应在 README 中说明并注明真实应用应改用服务端安全存储。五、第四步测试与打磨作业要求你在交付前完成四类验证多样化输入测试不同格式的地区代码、空值、超长输入边界情况处理无网络连接、API 返回非预期结构课程实现用可选链data?.carbonIntensity null主动校验缺失字段并抛出错误这是值得照搬的防御式写法浏览器重启后验证重启后扩展应能从 localStorage 恢复用户偏好并自动加载数据对应init()的老用户分支友好错误消息所有失败路径都应呈现可读的提示而非控制台报错。测试通过后按课程说明执行npm run buildwebpack 打包脚本定义见 solution/package.json并在浏览器扩展管理页加载已解压的扩展程序选择dist目录完成加载。六、附加挑战加分项若基础功能完成作业给出了五条进阶方向任意实现 12 条即可显著拉开与基准版本的差距接入多个 API 端点丰富扩展功能实现数据缓存减少重复 API 调用可在 localStorage 中为响应附带时间戳实现带过期的缓存创建键盘快捷键覆盖常见操作增加数据导入/导出功能实现用户自定义选项。七、提交要求最终交付物为三部分缺一不可可运行的浏览器扩展成功与你选择的 API 完成集成README 文件至少说明选择了哪个 API 及原因、如何安装与使用扩展、所需的 API Key 或环境配置、扩展实际使用中的截图可参考仓库 start/README.md 的撰写风格整洁、带注释的代码遵循现代 JavaScript 实践。八、评分标准作业提供了一套五维评分量表这是自我评估的黄金标尺逐项对照可精准定位短板标准优秀 (90-100%)良好 (80-89%)发展中 (70-79%)入门 (60-69%)API 集成API 集成无懈可击错误处理全面且覆盖边界情况API 集成成功具备基础错误处理API 可用但错误处理有限API 集成存在明显问题代码质量遵循最佳实践的整洁、注释充分的现代 JavaScript代码结构良好注释足够代码可用但组织性有待提高代码质量差注释极少用户体验界面精致加载状态与用户反馈出色界面良好具备基础用户反馈界面基础功能勉强可用用户体验差界面令人困惑本地存储localStorage 运用成熟含数据校验与管理关键功能正确使用了本地存储本地存储实现基础本地存储使用极少或错误文档README 详尽含安装说明与截图文档良好覆盖大部分要求基础文档缺少部分细节文档差或缺失九、上手建议从简单开始选择无需复杂鉴权的 API先跑通主流程通读文档彻底理解所选 API 的端点与响应结构再动手写fetch先画 UI 草图写代码前在纸上规划界面布局与状态切换频繁测试增量构建每加一个功能就测一个功能默认失败始终假设 API 调用可能失败并据此设计降级路径。十、配套资源导航本作业的每一步都可在仓库中找到直接可参考的素材第 2 课完整课程文档DOM 引用、事件监听、init/reset、fetch async/await 的逐步教学代码本作业的最佳参考答案作业原文英文本作业的权威英文版本评分标准以它为准课程参考实现CO2 Signal API 的完整可运行实现含可选链数据校验与扩展图标颜色联动起始模板带编号占位注释的空骨架适合作为你的编码起点项目说明与安装流程npm 安装、webpack 构建、Edge 加载扩展、申请 API Key 的完整流程另可参阅 MDN 的浏览器扩展文档、Fetch API 指南、Local Storage 教程与 JSON 解析文档作为实现细节的标准参考。现在就选一个你感兴趣的 API把它领养进自己的浏览器扩展吧——既能解决问题又能把本课学到的 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），仅供参考