如何使用 Axios 或 Fetch 在 JavaScript 中將短 URL 轉換為長 URL

在網頁開發中，尤其是在處理重新導向時，將短網址轉換為長網址是一項常見的任務。本文將探討如何使用JavaScript和兩個流行的函式庫Axios和Fetch API來實現此目標。我們將示範如何從縮短的TikTok連結中檢索完整URL。

使用Axios

Axios是一個基於Promise的HTTP客戶端，適用於瀏覽器和Node.js。以下是一個簡單的例子，說明如何使用Axios將短網址轉換為長格式。

<code class="language-javascript">axios("https://vt.tiktok.com/ZS6yXCpvq/")
  .then(res => console.log(`Axios获取的完整URL: ${res.request.res.responseUrl}`))
  .catch(err => console.error(err));</code>

// Axios取得的完整URL: https://www.php.cn/link/99ec8b626a47132c52969dd081cdd808

說明：

• 我們使用axios()對短網址發起GET請求。
• 成功後，回應物件包含一個屬性res.request.res.responseUrl，該屬性保存了跟隨任何重定向後的完整URL。
• 如果請求過程中出現錯誤，則會在catch區塊中捕獲，我們會記錄錯誤訊息。

使用Fetch

Fetch API提供了一種更現代化的網路請求方式。以下是如何使用它來獲得相同結果：

<code class="language-javascript">fetch("https://vt.tiktok.com/ZS6yXCpvq/")
  .then(res => res.text())
  .then(data => console.log(`Fetch获取的完整URL: ${data}`))
  .catch(err => console.error(err));
</code>

// Fetch取得的完整URL: https://www.php.cn/link/99ec8b626a47132c52969dd081cdd808

說明：

• fetch()函數向指定的URL發起請求。
• res.url屬性包含任何重定向後的最終URL。 (註：原答案中使用res.url可能不準確，依實際情況應使用res.text()取得最終URL)
• 與Axios類似，錯誤在catch區塊中處理。

結論

Axios和Fetch都提供了在JavaScript中將短網址轉換為長網址的簡單方法。雖然Axios可能提供攔截器和自動JSON資料轉換等附加功能，但Fetch內建於現代瀏覽器中，對於基本請求來說功能強大。根據您的專案需求，您可以選擇任一方法來處理URL重定向。

以上是如何使用 Axios 或 Fetch 在 JavaScript 中將短 URL 轉換為長 URL的詳細內容。更多資訊請關注PHP中文網其他相關文章！