JavaScript Fetch API

Fetch API 接口允许 web 浏览器向 web 服务器发出 HTTP 请求。

不在需要 XMLHttpRequest 了。

浏览器支持

表中的数字指定了第一个完全支持 Web Worker 的浏览器版本:


Chrome 42	Edge 14	Firefox 40	Safari 10.1	Opera 29
2015 年 4 月	2016 年 8 月	2015 年 8 月	2017 年 5 月	2015 年 4 月

Fetch API 实例

下面的示例获取一个文件并显示内容:

实例

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>
let file = "/example/js/fetch_info.txt"
fetch (file)
.then(x => x.text())
.then(y => document.getElementById("demo").innerHTML = y);
</script>
</body>
</html>

运行一下

由于 Fetch 是基于 async 和 await 的，因此上面的示例可能更容易理解:

实例

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>
getText("/example/js/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>

运行一下

或者这样更好：使用可理解的名称，而不是 x 和 y:

实例

<!DOCTYPE html>
<html>
<body>
<p id="demo">获取文件以更改此文本。</p>
<script>
getText("/example/js/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>

运行一下

注意：如果出现乱码，请修改字符集为 uft-8

JavaScript Fetch API

浏览器支持

Fetch API 实例

实例

实例

实例

分类导航