果您想從 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

非直接翻譯，有自行改編和添加部分，翻譯水平有限，難免有疏漏，歡迎指正