如何在Windows本地使用Visual Studio Code运行Fetch API相关代码
2026-9-24
Fetch API 入门使用解答
核心疑问直接解答
- 完全可以在Windows电脑上运行包含Fetch API的原生JS代码，不需要额外引入任何第三方JS库
- Fetch API是现代主流浏览器内置的原生接口，近5年发布的Chrome、Edge、Firefox、Safari都原生支持，无需额外加载依赖
为什么需要搭配Live Server使用
直接双击打开本地HTML文件时，浏览器会使用file://协议加载页面，出于浏览器同源安全策略限制，file://协议下无法正常发起Fetch请求，会报跨域错误。
使用VS Code的Live Server插件会启动一个本地临时HTTP服务，用http://localhost协议加载页面，就能正常调用Fetch API了。
你的代码运行步骤
- 先在VS Code的扩展商店安装「Live Server」插件，安装完成后VS Code右下角会出现「Go Live」按钮
- 新建一个空的项目文件夹，在里面存放2个文件：
- 包含你代码的HTML文件，要确保HTML里存在id为
demo的DOM元素 - 和HTML同级目录的
fetch_info.txt，写入你想要展示的测试内容
- 包含你代码的HTML文件，要确保HTML里存在id为
- 在VS Code中打开这个项目文件夹，打开HTML文件后点击右下角的「Go Live」按钮，浏览器会自动打开对应页面，就能看到txt文件的内容被加载到页面上了
完整可运行的示例代码
你可以直接复制下面的内容保存为HTML文件，和fetch_info.txt放在同一目录下即可：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Fetch测试</title> </head> <body> <div id="demo"></div> <script> let file = "fetch_info.txt" fetch(file) .then(response => response.text()) .then(content => document.getElementById("demo").innerHTML = content) .catch(error => console.log("加载失败，错误信息：", error)) </script> </body> </html>
常见问题排查
如果运行后没有展示内容，可以按F12打开浏览器控制台查看报错：
- 如果报跨域错误：确认你是点击「Go Live」启动的页面，而不是直接双击打开的HTML文件
- 如果报404错误：确认
fetch_info.txt和HTML文件在同一级目录，文件名没有拼写错误 - 如果报
document.getElementById(...) is null：确认HTML里存在id为demo的元素，且JS写在该元素的后面
内容的提问来源于stack exchange，提问作者RotatingWheel
相关产品推荐
相关产品推荐
