JavaScript Fetch API
JavaScript基础 2022-04-25 01:52:52小码哥的IT人生shichen
JavaScript Fetch API
Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。
不再需要 XMLHttpRequest。
浏览器支持
表中的数字注明了完全支持 Fetch API 的首个浏览器版本：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 42 | Edge 14 | Firefox 40 | Safari 10.1 | Opera 29 |
| 2011 年 6 月 | 2016 年 8 月 | 2015 年 8 月 | 2017 年 3 月 | 2015 年 4 月 |
Fetch API 实例
下面的例子获取文件并显示内容：
示例代码：
fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>
let file = "/demo/fetch_info.txt"
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);
</script>
</body>
</html>
运行结果：
Fetch API The Fetch API interface allows web browser to make HTTP requests to web servers. If you use the XMLHttpRequest Object, Fetch can do the same in a simpler way.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
由于 Fetch 基于 async 和 await，因此上面的例子这么写可能更容易理解：
示例代码：
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
myDisplay(y);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>
getText("/demo/fetch_info.txt");
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>
运行结果：
Fetch API The Fetch API interface allows web browser to make HTTP requests to web servers. If you use the XMLHttpRequest Object, Fetch can do the same in a simpler way.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
甚至可以更好：请使用易于理解的名称而不是 x 和 y：
示例代码：
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
myDisplay(myText);
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>
getText("/demo/fetch_info.txt");
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
document.getElementById("demo").innerHTML = myText;
}
</script>
</body>
</html>
运行结果：
Fetch API The Fetch API interface allows web browser to make HTTP requests to web servers. If you use the XMLHttpRequest Object, Fetch can do the same in a simpler way.
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
