简介
fetch api 代表了 web 应用程序与服务器交互以及通过网络检索内容的方式的重大演变。 fetch api 作为 xmlhttprequest (xhr) 的现代替代方案推出，为开发人员提供了更强大的功能、灵活性和简单性。随着与现代浏览器的集成，fetch 已成为构建当代 web 应用程序的重要工具，可以更自然、更高效地处理异步操作。
fetch api 是什么？
fetch api 是一个 javascript 接口，可简化发送 http 请求和处理网络响应。与旧的 xmlhttprequest 不同，fetch 提供了一个与 javascript 的 promise api 无缝集成的简化接口。这种集成不仅可以更轻松地管理异步操作，还可以提高代码的可读性和可维护性，使您的代码库更干净、更易于管理。
fetch 的核心是围绕 fetch() 函数构建的，这是现代浏览器中可用的发送网络请求的全局函数。该函数返回一个解析为 response 对象的 promise，使开发人员可以轻松访问响应数据、标头和状态。这允许采用更直观、更有组织的方法来处理网络请求的结果。 （阅读更多）
基本语法
fetch api 围绕 fetch() 函数，该函数被设计得既简单又强大。该函数用于发起网络请求，带有两个主要参数：
简单fetch调用的结构
基本的获取调用很简单，如下所示：
fetch(url)
.then(response => {
// handle the response here
})
.catch(error => {
// handle any errors here
});
基本获取请求示例
fetch('https://api.example.com/data')
.then(response => {
console.log(response);
})
.catch(error => {
console.error('error:', error);
});
这个示例演示了如何发出简单的 fetch 请求，成功后将响应记录到控制台，并优雅地处理错误。
为什么使用fetch？
使用fetch的优点
promises: fetch 最显着的优势之一是它对 promises 的使用。与 xhr 基于回调的方法相比，promise 提供了一种更清晰、更易于管理的方式来处理异步任务。使用 promises，您可以链接 .then() 方法来处理成功响应，并链接 .catch() 方法来管理错误，从而使代码更具可读性且更易于调试。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('error:', error));
此外，fetch api 与 async/await 语法完美搭配，使异步代码更加简单。
使用 async/await 的示例：
async function fetchdata() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('error:', error);
}
}
更简洁的语法： 与 xhr 相比，fetch 提供了现代且简洁的语法。传递给 fetch() 的配置对象可以轻松设置请求参数，例如 http 方法、标头和正文内容，从而使代码更干净、更易于维护。（阅读全文
fetch('https://api.example.com/data', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: json.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('error:', error));
流处理： fetch 支持响应流，可以让开发者更高效地处理大量数据。虽然 xhr 可能会难以应对大型响应，从而导致性能问题或需要额外的处理来进行块处理，但 fetch 的 response 对象提供了 .body.getreader() 等方法来读取块中的数据。这对于流式传输和管理大型数据集特别有用。
fetch('https://api.example.com/large-data')
.then(response => {
const reader = response.body.getReader();
let decoder = new TextDecoder();
let result = '';
return reader.read().then(function processText({ done, value }) {
if (done) {
console.log('Stream finished.');
return result;
}
result += decoder.decode(value, { stream: true });
return reader.read().then(processText);
});
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
阅读全文-点击这里
结论
fetch api 彻底改变了开发人员在 web 应用程序中发出网络请求的方式。凭借其简洁的语法、与 promises 的无缝集成以及对异步/等待和流式传输等现代功能的支持，fetch 提供了一个强大而灵活的工具来处理 http 请求。随着 web 开发的不断发展，fetch api 将仍然是构建高效、可维护和现代 web 应用程序的关键组件。