🌐 第十一课：fetch 调 API — 让网页上网拿数据

回顾你的"数据能力"升级史：

阶段	数据从哪来	比喻	课
变量/数组/对象	自己写死在代码里	自己做饭 🍳	第三～十课
localStorage	自己存、自己取	自己家冰箱 🧊	第七课
fetch 调 API	从网上别人的服务器拿	点外卖 🛵	⭐ 今天

🎭 总比喻：今天的课 = 点外卖。
你的网页是"你"，别人服务器上的 API 是"餐厅"，fetch 就是打电话点餐，送来的外卖盒里装的是——第十课的老朋友 JSON 字条！
第十课你学会了 JSON 这门"世界语"，今天学"怎么叫外卖"。学完你的网页就活了——天气、名言、新闻，全世界的数据随你点。

📞 2. fetch 三步曲：点餐 → 拆盒 → 开吃

用一个"随机一言"API 做例子（这个网址会随机返回一句中文句子，新代码标序号）：

fetch('https://v1.hitokoto.cn/') /* ① 拨号点餐：向这个网址要数据 */

  .then(r => r.json()) /* ② 餐到了，拆盒：JSON 字条 → 对象 */

  .then(data => { /* ③ 开吃：data 就是第十课的老朋友 */

      console.log(data.hitokoto); /* ③ 比如打印句子 */

  });

序号	步骤	说明
①	`fetch('网址')`	拨号点餐。这个网址叫 API（餐厅），专门提供数据
②	`.then(r => r.json())`	餐到了，拆盒：把 JSON 字条拆包成对象（`json()` 内部就是第十课的 `JSON.parse`）
③	`.then(data => ...)`	拿到对象 `data`，用点语法取标签，随你怎么玩

📌 箭头函数 r => r.json() 是 function(r) { return r.json(); } 的简写——第三课学的函数换了件"小马甲"，见到别慌。

这个 API 返回的 JSON 长这样（先拆盒再看，标签一目了然）：
{"hitokoto": "山重水复疑无路，柳暗花明又一村。", "from": "游山西村", ...}

⏳ 3. 为什么不能直接 = 拿结果？——异步

很多新手会这么写，然后一脸懵：

let data = fetch('https://v1.hitokoto.cn/'); // ❌ 拿到的是"订单号"，不是餐！

console.log(data.hitokoto); // ❌ undefined，菜还没送到呢

原因：网络点餐是要等的，菜不可能一秒送到。fetch 一挂电话就立刻返回一张订单号（叫 Promise），真正的外卖之后才到。

方式	比喻	代码
同步（以前的代码）	食堂打饭，站窗口立刻拿到	`let x = 1 + 1;` 立刻有结果
异步（今天的 fetch）	点外卖，先挂电话，餐到了再喊你	`fetch(...).then(餐到了做什么)`

.then(...) 的意思就是："餐送到了之后，执行这里的代码"。你可以连续写多个 .then，就像交代外卖员"送到之后放门口，再发条短信"。

✨ 异步的好处：等外卖时你不会傻站着——网页该动的按钮还在动、该滚的页面还在滚。
JS 用异步保证"网络再慢也不卡死页面"，这是现代网页的命根子。

🎮 4. 亲手玩：外卖操作台

点按钮，看网页真的从网上"拿"到数据！（按 F12 → Console 也能看到原始 JSON 对象）

🍜 一言外卖（随机一句中文名言）：

（还没点单）

🌤 天气外卖（上海实时天气，来自 Open-Meteo 免费天气 API）：

（还没点单）

两个按钮背后是同一套三步曲。注意点击后显示区先出现"等餐中"——那就是异步：代码先交代好"餐到了做什么"，然后挂电话等着。

🕳️ 5. 新手必踩的两个坑

坑 1：忘了拆盒（.json()）

fetch('https://v1.hitokoto.cn/').then(r => console.log(r.hitokoto)); // ❌ undefined！
        

r 不是数据本身，是外卖盒（Response 对象）。必须 r.json() 拆盒，里面的字条才变成对象。忘了拆盒，就是对着盒子找汉堡。

坑 2：file:// 页面不能 fetch 本地 json 文件

练习时如果你自己建了个 data.json 想 fetch，双击打开页面（地址栏 file://）会报 CORS 错误——浏览器安全规则，本地页面不许拿本地文件。
所以练习用 https 开头的真 API 网址（像本课的这两个），它们允许任何人来点餐。

🛠️ 6. 动手挑战

✏️ 两个挑战：

① 给主页加"💬 每日一言"（必做）
在 my-site\index.html 的「作品」区后面加一个新 <section>：
  · 一个按钮 <button onclick="getQuote()">🛵 来一句</button>
  · 一个占位 <span id="quote"></span>（第十课学的占位法！）
  · 一个 getQuote() 函数，fetch 一言 API，把 data.hitokoto 塞进占位符
改完记得同步副本 + 上传网站。

② 附加题：加"🌤 今日天气"
照葫芦画瓢再来一个 getWeather()，用天气 API。坐标换成你所在的城市：
  网址里的 latitude= 和 longitude= 就是坐标，去搜"你所在城市经纬度"查两个数字替换（保留一位小数即可，上海是 31.2 / 121.5）。
  显示 data.current_weather.temperature 和 data.current_weather.windspeed。

老规矩：改代码 → 保存 → 刷新 → F12 看报错。fetch 报错最常见的原因：① 网址打错 ② 忘了 .json() 拆盒 ③ 网络问题（试试手机热点）。

📋 7. 今日总结

知识点	一句话
fetch ⭐	`fetch('网址')` — 向 API 服务器点外卖
拆盒 ⭐	`.then(r => r.json())` — JSON 字条拆成对象
用数据 ⭐	`.then(data => ...)` — 点语法取标签
异步	点外卖要等，`.then` = "餐到了做什么"，页面不卡死
箭头函数	`r => r.json()` = 函数简写

🎉 学完这一课：你的网页第一次"上网"了——
从只能玩自己写的数据，到能点全世界服务器的数据。
第十课的对象+JSON + 今天的三步曲 = 现代网页开发的核心姿势，前端后端全靠它交流。

✅ 下一步？

🎵

第十二课：音乐播放器（综合实战）

把 HTML/CSS/JS/数组+对象/fetch 全部串起来，做你的第一个"小软件"——也是你一直想做的那个 🎧

先做挑战，做完喊我检查！🚀