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>
为了以适当的格式生成表单数据,我们使用FormData
object。
{ "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 教程。