果您想从 API 加载数据，那么 fetch API 是在 JavaScript 中执行此操作的最佳方式。您不需要引入任何第三方库，就可以直接使用方便的fetch。

像上图所示，绝大多数浏览器已经原生支持Fetch，所以您可以放心使用。Node.js 对它的支持也正在路上，Fetch 已经作为 Node v17 中的实验性功能提供，你可以使用 node app.js --experimental-fetch 来开启它。

Fetch API 的基本使用

Fetch API 是基于Promise的，所以如果你不了解Promise, 最好先学习一下Promise。

调用 fetch API 的最简单方法是将 URL 传递给 fetch 函数。

这将返回一个包含响应数据的Promise。此响应数据包含状态属性以及将原始响应数据转换为 JSON、文本或其他格式的方法。

上面显示res.json() 是在我们的响应中调用 json() 方法，这个方法会返回另外一个 promise，该 promise 从我们的响应中解析 JSON 数据。

我们可以在后面的then方法中获取到最终需要的JSON数据对象。

如果您从 JSON api 获取数据，这就是大多数获取请求的样子。 我们首先获取 URL，然后将响应转换为 JSON，最后使用最终 .then 中的数据。

如果使用async/await语法，可能会更简单点。

Fetch 参数

这将涵盖您的一些 fetch 用途，但通常您需要传递其他选项来进行 fetch 配置。 fetch 函数采用第二个选项对象参数，其中包含大量潜在选项。

method

最常用的选项是方法选项。 此选项允许您设置要使用的 HTTP 动词（GET、POST、PUT、DELETE 等）。

body

如果您正在修改方法，那么您可能需要将数据与您的请求一起传递。 这就是 body 选项的用武之地。body 不接受对象，因此如果您想将 JSON 传递给您的 API，您必须首先将其转换为字符串。

headers

现在，执行上述操作可能看起来像是将 JSON 传递给 API 所需要做的一切，但这实际上是行不通的。 原因是您需要设置正确的标头来告诉您的 API 您正在发送 JSON 信息。 此标头选项允许您设置所需的任何 HTTP 标头。

上面这组代码是将 JSON 传递给 API 所需要做的一切。

signal

最后一个要说的的是信号选项。 这个选项接受一个 AbortSignal，它可以用来中止一个获取请求。

正如您从代码中看到的那样，这比其他选项要复杂一些。 首先你必须创建一个新的 AbortController 这个控制器有一个信号属性，这是你传递给signal选项的。 控制器还有一个 abort 方法，当调用该方法时，将使用相关信号中止获取请求。 这将导致 fetch Promise以 AbortError Reject异常。

这些选项应该是可以cover你90%左右的用例。具体还有其他一些不常用的可以去查看官网文档。

总结：

fetch API 是一个功能强大的工具，易于上手，它包含适用于每个可以想象的用例的许多高级选项。最重要的是，马上node.js就可以原生支持它，逻辑可以前后端共享，岂不美哉！

感谢阅读！

<audio controls>
 <source src="audiofile.mp3" type="audio/mpeg">
 <source src="audiofile.ogg" type="audio/ogg">
 <!-- 如果浏览器不支持，则会呈现下面内容 -->
 <p>你的浏览器不支持HTML5音频，你可以<a href="audiofile.mp3">下载</a>这个音频文件。</p>
</audio>

<audio src="audiofile.mp3" controls></audio>

<audio src="audiofile.mp3" autoplay></audio>

<audio src="audiofile.mp3" loop></audio>

document.querySelector('audio').loop = true;

<audio src="audiofile.mp3" muted></audio>

document.querySelector('audio').muted = true;

<audio src="audiofile.mp3" preload="auto"></audio>

<audio src="audiofile.mp3" controls></audio>

<audio src="audiofile.mp3"></audio>

<audio src="audiofile.mp3" type="audio/mpeg"></audio>

<audio id="myAudio" src="audiofile.mp3"></audio>

// 获取音频已经播放时长
var playedTime = myAudio.currentTime;

// 跳到5秒那里
myAudio.currentTime = 5;

// 设置音量50%
myAudio.volume = 0.5;

// 获取音频播放速率
var audioSpeed = audio.playbackRate;
// 设置音频设置播放速率为正常速度的1.5倍
audio.playbackRate = 1.5;

// true或false
console.log(myAudio.paused);

myAudio.play();

myAudio.pause();

if (myAudio.canPlayType('audio/mpeg')) {
 // 如果支持mp3
 // 这里搞事情
}

var myAudio = document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg')) {
 myAudio.setAttribute('src','audiofile.mp3');
}
if (myAudio.canPlayType('audio/ogg')) {
 myAudio.setAttribute('src','audiofile.ogg');
}

myAudio.load();

myAudio.addEventListener("loadstart", function() {
 // 抓取文件
});

myAudio.addEventListener("durationchange", function() {
 // 可以显示播放时长了哟
});

myAudio.addEventListener("loadeddata", function() {
 // 可以显示播放头
});

myAudio.addEventListener("progress", function() {
 // 你可以让用户知道媒体文件正在下载
});

myAudio.addEventListener("canplay", function() {
 // 音频可以播放了
});

myAudio.addEventListener("canplaythrough", function() {
 // 音频可以不发生缓冲从头播放到结束
});

myAudio.addEventListener("timeupdate", function() {
 // 更新与播放进度相关的内容
});

myAudio.addEventListener("ended", function() {
 // 当音轨播放完毕时候做你想做的事情
});

myBufferedTimeRanges = myAudio.buffered;

mySeekableTimeRanges = myAudio.seekable;

载说明：原创不易，未经授权，谢绝任何形式的转载

大家好，随着技术的迅速发展，开发者们拥有了越来越多的令人惊叹的新工具和API。但是，我们发现在100多个API中，只有5%的API被开发者们积极地使用。

下面让我们来看看一些有用的Web API，它们可以帮助你将你的网站推向未来的巅峰！

1、屏幕捕获API

屏幕捕获API，正如其名，允许你捕获屏幕内容，让制作屏幕录像变得轻而易举。你需要一个视频元素来显示捕获的屏幕。点击开始按钮即可开始屏幕捕获。

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

// 获取HTML元素
const previewElem = document.getElementById("preview"); // 预览元素
const startBtn = document.getElementById("start"); // 开始按钮元素

// 异步函数，开始录制屏幕和声音
async function startRecording() {
  previewElem.srcObject = // 将预览元素的srcObject属性设置为获取到的屏幕和声音媒体流
    await navigator.mediaDevices.getDisplayMedia({
      video: true, // 录制视频
      audio: true, // 录制声音
    });
}

// 为开始按钮添加点击事件监听器，点击时调用startRecording函数
startBtn.addEventListener("click", startRecording);

2、Web Share API

Web Share API 允许你从一个网页分享文本、链接甚至是文件到设备上安装的其他应用程序。

// 异步函数，处理分享事件
async function shareHandler() {
  // 调用navigator.share方法进行分享，传入分享内容的相关信息
  navigator.share({
    title: "Tapajyoti Bose | Portfolio", // 分享标题
    text: "Check out my website", // 分享文本
    url: "https://tapajyoti-bose.vercel.app/", // 分享链接
  });
}

// 给某个元素添加点击事件监听器，点击时调用shareHandler函数
someElement.addEventListener("click", shareHandler);

注意：要使用 Web Share API，你需要从用户那里获得互动，例如按钮点击或触摸事件。

3、Intersection Observer API

Intersection Observer API 允许你检测元素何时进入或离开视口。这对于实现无限滚动非常有用。

简单的例子

// 创建一个IntersectionObserver实例，观察特定元素
const observer = new IntersectionObserver((entries) => {
  // 遍历每个entry，判断是否在视口内
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 元素进入视口，执行相应操作
    } else {
      // 元素离开视口，执行相应操作
    }
  });
});

// 将需要观察的元素传递给IntersectionObserver实例
const target = document.querySelector(".target");
observer.observe(target);

一个复杂的分页滚动（React版本）

<div id="root"></div>

/* The entire styling is totally optional */

* {
  font-family: Roboto;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.item {
  width: 80vw;
  margin: 12px 0;
  padding: 32px;
  border-radius: 8px;
  font-size: larger;
}

.loader {
  border: 8px solid #cccccc;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.6s linear infinite;
  display: inline-block;
  margin: 8px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 声明常量MAX_PAGES，表示可加载的最大页数
const MAX_PAGES = 5;

// 生成随机颜色的函数
const generateRandomColor = () => {
  const characters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += characters[Math.floor(Math.random() * 16)];
  }
  return color;
};

// 定义Item组件，接受children、color和reference属性，返回带有颜色的div元素
const Item = ({ children, color, reference }) => {
  return (
    <div className="item" style={{ backgroundColor: color }} ref={reference}>
      {children}
    </div>
  );
};

// 定义App组件
const App = () => {
  // 定义状态变量：items-加载的数据数组、isLoading-是否正在加载数据、hasMore-是否还有更多数据可加载、pages-已加载的页数
  const [items, setItems] = React.useState([]);
  const [isLoading, setIsLoading] = React.useState(false);
  const [hasMore, setHasMore] = React.useState(true);
  const [pages, setPages] = React.useState(0);

  // 定义ref引用observer
  const observer = React.useRef();

  // 在挂载时更新items数组和pages变量
  React.useEffect(() => {
    updateItems();
    setPages((pages) => pages + 1);
  }, []);

  // 定义lastItemRef回调函数，用于观察最后一个元素是否进入视口
  const lastItemRef = React.useCallback(
    (node) => {
      if (isLoading) return;
      if (observer.current) observer.current.disconnect();

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          if (pages < MAX_PAGES) {
            updateItems();
            setPages((pages) => pages + 1);
          } else {
            setHasMore(false);
          }
        }
      });

      if (node) observer.current.observe(node);
    },
    [isLoading, hasMore]
  );

  // 定义updateItems异步函数，更新items数组和isLoading状态变量
  const updateItems = async () => {
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 1000));

    setItems((currItems) => {
      const lastItem = currItems.length;
      const updatedItems = [...currItems];
      for (let i = 1; i <= 5; i++) {
        const item = {
          count: lastItem + i,
          color: generateRandomColor()
        };
        updatedItems.push(item);
      }
      return updatedItems;
    });

    setIsLoading(false);
  };

  // 返回页面结构
  return (
    <React.Fragment>
      <h1>Infinite Scroll Demo</h1>
      {items.map((item, index) =>
        index + 1 === items.length ? (
          <Item reference={lastItemRef} key={index} color={item.color}>
            {item.count}
          </Item>
        ) : (
          <Item key={index} color={item.color}>
            {item.count}
          </Item>
        )
      )}
      {isLoading && <div className="loader" />}
    </React.Fragment>
  );
};

// 将App组件渲

注意：此示例使用React，因为这是我个人偏好，但你可以使用任何框架或原生JavaScript。

4、Clipboard API

Clipboard API 允许你读取和写入剪贴板中的数据。这对于实现复制到剪贴板的功能非常有用。

// 定义异步函数copyHandler，将指定文本写入剪贴板
async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5、Screen Wake Lock API

你是否曾经想过在观看视频时如何防止屏幕关闭？这就是因为使用了 Screen Wake Lock API。

// 声明变量wakeLock
let wakeLock = null;

// 定义异步函数lockHandler，请求屏幕唤醒锁定
async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

// 定义异步函数releaseHandler，释放屏幕唤醒锁定
async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}

// 注意：只有页面已经在屏幕上可见时，才能使用Screen Wake Lock API。否则会抛出错误。

6、Screen Orientation API

Screen Orientation API 允许你检查屏幕的当前方向，甚至锁定到特定的方向。

// 定义异步函数lockHandler，锁定屏幕方向为竖屏
async function lockHandler() {
  await screen.orientation.lock("portrait");
}

// 定义函数releaseHandler，解除屏幕方向锁定
function releaseHandler() {
  screen.orientation.unlock();
}

// 定义函数getOrientation，返回屏幕当前的方向
function getOrientation() {
  return screen.orientation.type;
}

7、Fullscreen API

Fullscreen API 允许你将一个元素或整个页面显示为全屏。

// 定义异步函数enterFullscreen，将整个文档元素进入全屏模式
async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

// 定义异步函数exitFullscreen，退出全屏模式
async function exitFullscreen() {
  await document.exitFullscreen();
}

// 注意：为了使用 Fullscreen API，同样需要用户的交互。

注意：同样需要用户的交互才能使用 Fullscreen API。

兼容性

这些API，目前在主流浏览器中都得到了很好的支持，包括Google Chrome、Mozilla Firefox、Safari和Microsoft Edge等浏览器。但是，在旧版浏览器中可能会存在一些兼容性问题。因此，在开发使用时，应该考虑到不同浏览器的兼容性问题，并根据实际情况选择是否使用这些API。

结束

非常棒！通过本文的介绍和代码示例，相信大家已经了解了这些有用的Web API，并且知道如何使用它们来提升网站的用户体验和功能。虽然这些API在不同浏览器中的兼容性可能存在一些问题，但我们可以通过适当的兼容性检查和回退方案来确保网站的稳定性和可靠性。总之，Web API为开发者提供了强大的工具和资源，让我们一起探索并不断尝试新的技术和功能，为用户带来更好的体验和价值。

今天的分享就到这里，感谢你的阅读，希望能够帮助到你，文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

原文：https://tapajyoti-bose.medium.com/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-12b737ccf594

作者：Tapajyoti Bose

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正