JavaScript 获取教程展示了如何使用获取 API 在 JavaScript 中异步获取资源。
获取函数
fetch 是一个全局函数，它接受 url 和选项参数并返回一个承诺。承诺解决请求的响应。
let promise = fetch(url, [options])
如果我们不提供options，将生成一个简单的 GET 请求来下载 url 的内容。
当我们得到响应时，我们可以检查 HTTP 状态或标头，但我们还没有正文。为了获取响应的主体，我们调用以下方法之一：
- response.text() ― 将响应读取为文本
- response.json() ― 将响应解析为 JSON
- response.formData( ) ― 将响应作为 FormData 对象返回
- response.blob() ― 将响应作为 Blob 返回
- response.arrayBuffer() ― 将响应作为 ArrayBuffer 返回（二进制数据的低级表示）
fetch 函数可以与回调一起使用，也可以与async/await 关键字一起使用。
JavaScript 获取简单示例
在第一个示例中，我们使用fetch 函数生成一个简单的异步 GET 请求。
<script>
fetch('http://time.jsontest.com')
.then(res => res.json())
.then((data) => {
console.log(data);
}).catch(err => console.error(err));
</script>
在这个例子中，我们使用回调。 time.jsontest.com 以 JSON 格式返回当前时间。从响应对象中，我们使用 json 函数检索数据。
Object { date: "01-26-2021", milliseconds_since_epoch: 1611661589016,
time: "11:46:29 AM" }
我们在浏览器中检查控制台输出。
<script>
async function doRequest() {
let url = 'http://time.jsontest.com';
let res = await fetch(url);
if (res.ok) {
let json = await res.json();
return json;
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
在此示例中，我们使用async/await 关键字。
if (res.ok) {
ok 属性为 HTTP 状态代码 200-299 返回一个布尔值 true。
JS 获取 GET 请求
以下示例创建一个简单的 GET 请求并将结果作为文本处理。
<script>
async function doRequest() {
let url = 'http://webcode.me';
let res = await fetch(url);
if (res.ok) {
let text = await res.text();
return text;
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
我们得到了 webcode.me 网页的内容。
let url = 'http://webcode.me'; let res = await fetch(url);
fetch 方法只接受 URL 作为参数。在这种情况下，默认请求是 GET 请求。
let text = await res.text();
我们从纯文本形式的请求中获取正文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My html page</title>
</head>
<body>
<p>
Today is a beautiful day. We go swimming and fishing.
</p>
<p>
Hello there. How are you?
</p>
</body>
</html>
这是我们可以在浏览器控制台窗口中看到的输出。
JS 获取带有查询参数的 GET 请求
在下面的示例中，我们将一些查询参数附加到 URL。
<script>
async function doRequest() {
let url = new URL('http://httpbin.org/get');
let params = {'name': 'John Doe', 'occupation': 'John Doe'};
url.search = new URLSearchParams(params);
let res = await fetch(url);
if (res.ok) {
let text = await res.text();
return text;
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
我们使用URLSearchParams 将JSON 对象转换为合适的URL 查询形式。
{
"args": {
"name": "John Doe",
"occupation": "John Doe"
},
"headers": {
"Accept": "*/*",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "en-US,en;q=0.5",
"Host": "httpbin.org",
"Origin": "null",
"User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0",
"X-Amzn-Trace-Id": "Root=1-600ff33e-71b89c984ad2878035263a8b"
},
...
"url": "http://httpbin.org/get?name=John+Doe&occupation=John+Doe"
}
我们从httpbin.org 网页获得此输出。
JS fetch 获取图片
以下示例检索图像并将其显示在页面上。
<script>
async function doRequest() {
let url = 'https://dummyimage.com/100x100/499deb/fff';
let res = await fetch(url);
let blob = await res.blob();
return blob;
}
doRequest().then(blob => {
let img = document.createElement('img');
document.body.append(img);
img.src = URL.createObjectURL(blob);
});
</script>
示例使用 dummyimage.com网页获取图片。这是一个用于测试目的的小测试页。
let blob = await res.blob();
要获取图像数据，我们调用blob 函数。
let img = document.createElement('img');
document.body.append(img);
我们以编程方式创建img 标签。
img.src = URL.createObjectURL(blob);
我们使用createObjectURL 函数创建图像。
JS 获取 JSON POST 请求
以下示例使用 JSON 数据生成 POST 请求。
<script>
async function doRequest() {
let url = 'http://httpbin.org/post';
let data = {'name': 'John Doe', 'occupation': 'John Doe'};
let res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (res.ok) {
// let text = await res.text();
// return text;
let ret = await res.json();
return JSON.parse(ret.data);
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
请求被发送到 http://httpbin.org/post。
let data = {'name': 'John Doe', 'occupation': 'John Doe'};
这是要发送的数据。
let res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
我们将method 参数设置为POST 并选择application/json 作为内容类型。数据被字符串化为body参数。
let ret = await res.json(); return JSON.parse(ret.data);
我们将数据作为 JSON 字符串取回并将其解析为 JSON 对象。
Object { name: "John Doe", occupation: "John Doe" }
JS 获取 POST 表单数据
在下面的示例中，我们生成一个带有表单数据的 POST 请求。
使用application/x-www-form-urlencoded，数据在请求的正文中发送；键和值被编码在由“&”分隔的键值元组中，键和值之间有一个“=”。
<script>
async function doRequest() {
let url = 'http://httpbin.org/post';
let formData = new FormData();
formData.append('name', 'John Doe');
formData.append('occupation', 'gardener');
let res = await fetch(url, {
method: 'POST',
body: formData,
});
if (res.ok) {
let text = await res.text();
return text;
} else {
return `HTTP error: ${res.status}`;
}
}
doRequest().then(data => {
console.log(data);
});
</script>
为了以适当的格式生成表单数据，我们使用FormDataobject。
{
"args": {},
"data": "",
"files": {},
"form": {
"name": "John Doe",
"occupation": "gardener"
},
"headers": {
"Accept": "*/*",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "en-US,en;q=0.5",
"Content-Length": "305",
"Content-Type": "multipart/form-data; ...
"Host": "httpbin.org",
"Origin": "null",
"User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0",
"X-Amzn-Trace-Id": "Root=1-600ff649-4cd21c6a503e694211f73b0c"
},
"json": null,
...
"url": "http://httpbin.org/post"
}
在本文中，我们使用了 JavaScript fetch API。
列出 JavaScript 教程。
