Node.js v21.0.0 起fetch进入稳定状态，起飞！fetch() 方法用于发起获取资源的请求，它会返回 promise。使用fetch和async/await可以极大的简化我们的操作。这里将用《天气查询》作为使用案例进行演示。
fetch(URL)
fetch(URL,选项)
〇、官方倍数
Node.js官方文档就一句话。一个类似浏览器接口 fetch() 函数的实现。
前后端调用的写法一致性。Node.js也不需要引入其他。
一、LV_1天气查询效果演示
发起fetch请求，关键调用代码。简洁多了！🐤🐤🐤
注册一个天气的API接口，十几行代码就可以查天气了。 但固定值还是不太方便，接下来改成更像交互应用。
const appid = 1234567 //修改为自己的
const appsecret = `xxxxxxx` //修改为自己的
let URL =`http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=${appid}&appsecret=${appsecret}`
获取(URL)
async function 获取(URL){
let 响应 = await fetch(URL)
let 数据 = await 响应.json()
let 小时 = 数据.hours
数据.hours = null //清空天气数据
数据.aqi = null
console.table(数据)
console.log('------------- 每小时天气预报 -----------')
console.table(小时)
return 数据
}
二、LV_2多城市天气效果演示
有了上面的代码，在Node.js中使用readline读取用户输入获取城市，发起fetch请求。 多城市交互查询,效果如下动图
现在readline也支持Promise了，通过while(true) ,使用rl.question('请输入待查询的城市 🌤️ :') 获取用户输入,使用 获取(URL)发起fetch请求。
使用console.table()将输出快速表格化，在浏览器和命令行终端都适用。
注意输出在终端命令行表格布局可能被挤压。VsCode代码编辑器中可以使用"Ctrl"+"-键"来缩小面板，
"Ctrl"+"+键"放大面板来缩放，配合鼠标展开面板。终端有时候仍然不能回复，重新运行一遍即可。
在终端调用上一次命令使用Ctrl+"↑键"。
如下动图演示：
const readline = require('readline/promises');
const { stdin: input, stdout: output } = require('process');
const appid = 1234567 //修改为自己的
const appsecret = `xxxxxxx` //修改为自己的
let URL =`http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=${appid}&appsecret=${appsecret}`
主要()
async function 主要(){
const rl = readline.createInterface({ input, output });
while (true) {
const 城市 = await rl.question('请输入待查询的城市 🌤️ :');
await 获取(`${URL}&city=${城市}`)
}
}//主要
async function 获取(URL){
let 响应 = await fetch(URL)
let 数据 = await 响应.json()
let 小时 = 数据.hours
数据.hours = null //清空天气数据
数据.aqi = null
console.table(数据)
console.log('------------- 每小时天气预报 -----------')
console.table(小时)
return 数据
}
三、总结
编程语言始终要更方便书写。追求更高、更快、更强，编程语言进步、进化、超越。
大胆拥抱变化。
1 🐳Fetch VS AJAX
对比AJAX（基于XMLHttpRequest）和Fetch API的特点：
| 特性 | Fetch API | AJAX (XMLHttpRequest) |
|---|---|---|
| 历史 | 较新技术，旨在简化资源获取过程 | 早期技术，广泛应用于Web 2.0时代 |
| 出现时间 | 2015年作为WHATWG Living Standard的一部分发布 | 1999年由微软引入成为W3C标准 |
| 使用 | 默认为异步请求，基于Promise | 支持同步和异步请求 |
| 语法 | 更简洁直观，减少样板代码 | 复杂，设置请求头、监听事件 |
| 错误处理 | 在网络请求失败时拒绝Promise，需手动检查response.ok | 错依赖状态码检查 |
| 特性支持 | 支持流（Streams），适合大文件或实时数据 | 不直接支持流式数据处理 |
| CORS支持 | 内置对CORS的支持 | 需要额外配置 |
AI评价：从AJAX转向Fetch是一个自然的进步，反映了编程语言和Web开发工具不断追求更高效率、更强功能和更易用性的趋势。如果你正在编写新的JavaScript代码，强烈建议使用Fetch API
