了解 Fetch API：Web 开发中网络请求的未来

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签未来

简介
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 =&gt; {    // handle the response here  })  .catch(error =&gt; {    // handle any errors here  });

基本获取请求示例

fetch('https://api.example.com/data')  .then(response =&gt; {    console.log(response);  })  .catch(error =&gt; {    console.error('error:', error);  });

这个示例演示了如何发出简单的 fetch 请求，成功后将响应记录到控制台，并优雅地处理错误。

为什么使用fetch？

使用fetch的优点

promises: fetch 最显着的优势之一是它对 promises 的使用。与 xhr 基于回调的方法相比，promise 提供了一种更清晰、更易于管理的方式来处理异步任务。使用 promises，您可以链接 .then() 方法来处理成功响应，并链接 .catch() 方法来管理错误，从而使代码更具可读性且更易于调试。

fetch('https://api.example.com/data')  .then(response =&gt; response.json())  .then(data =&gt; console.log(data))  .catch(error =&gt; 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 =&gt; response.json())  .then(data =&gt; console.log(data))  .catch(error =&gt; console.error('error:', error));

流处理： fetch 支持响应流，可以让开发者更高效地处理大量数据。虽然 xhr 可能会难以应对大型响应，从而导致性能问题或需要额外的处理来进行块处理，但 fetch 的 response 对象提供了 .body.getreader() 等方法来读取块中的数据。这对于流式传输和管理大型数据集特别有用。

fetch('https://api.example.com/large-data')  .then(response =&gt; {    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 =&gt; console.log(data))  .catch(error =&gt; console.error('Error:', error));

阅读全文-点击这里

结论
fetch api 彻底改变了开发人员在 web 应用程序中发出网络请求的方式。凭借其简洁的语法、与 promises 的无缝集成以及对异步/等待和流式传输等现代功能的支持，fetch 提供了一个强大而灵活的工具来处理 http 请求。随着 web 开发的不断发展，fetch api 将仍然是构建高效、可维护和现代 web 应用程序的关键组件。

文章推荐

了解 Fetch API：Web 开发中网络请求的未来

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？