🥇 fetch

链接：http://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html
fetch() 是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。浏览器原生提供这个对象。

🥇 fetch 的基本用法

fetch()的功能与 XMLHttpRequest 基本相同，但有三个主要的差异。

  1.   1. fetch() 使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
  2.   2. fetch() 采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。
  3.   3. fetch() 通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。
  1. // 基本用法
  2. fetch(url)
  3.   .then(
  4.     (response) => {
  5.       console.log("联系服务器成功了");
  6.       return response.json();
  7.     },
  8.     (error) => {
  9.       console.log("联系服务器失败了", error);
  10.       return new Promise(() => {});
  11.     }
  12.   )
  13.   .then(
  14.     (response) => {
  15.       console.log("获取数据成功了", response);
  16.     },
  17.     (error) => {
  18.       console.log("获取数据失败了", error);
  19.     }
  20.   );
  22. // 优化用法
  23. try {
  24.     const response = await fetch(`/api1/search/users2?q=${keyWord}`)
  25.     const data = await response.json()
  26.     console.log(data);
  27. } catch (error) {
  28.     console.log('请求出错', error);
  29. }