Fetch
fetch()
方法可启动一个从网络获取资源的过程,并返回一个 Promise。该 Promise 在网络资源响应可用时被完成。
// 要从中获取数据的 API 端点的 URL
const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';
// 使用 fetch 发送 GET 请求
fetch(apiUrl)
.then(response => {
// 检查请求是否成功(状态码在 200-299 范围内)
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// 将响应解析为 JSON
return response.json();
})
.then(data => {
// 处理响应中的数据
console.log('Data:', data);
})
.catch(error => {
// 处理在获取过程中可能发生的错误
console.error('Fetch error:', error);
});
上面示例的 async/await
版本如下:
async function fetchData() {
// 要从中获取数据的 API 端点的 URL
const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1';
try {
// 使用 await 与 fetch 一起发出 GET 请求
const response = await fetch(apiUrl);
// 检查请求是否成功(状态码在 200-299 范围内)
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// 将响应解析为 JSON
const data = await response.json();
// 处理响应中的数据
console.log('Data:', data);
} catch (error) {
// 处理在获取过程中可能发生的错误
console.error('Fetch error:', error);
}
}
// 调用异步函数执行异步操作
fetchData();
如果你不在乎可能的错误,只想简单地处理,可以这样写:
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => console.log(json))
Loading...
> 此处输出代码运行结果