时间戳

首页 > 解决方案 > 如何读取 JSON 并重定向下载

javascript - 如何读取 JSON 并重定向下载

问题描述

我正在尝试这样做，以便我的网站读取githubs api并自动将用户发送到最新的下载链接，在这种情况下，标签是browser_download_url，我将如何使用JSON.parse()或其他方式来阅读并重定向用户

标签： javascripthtmljsongithub-api

解决方案

JSON.stringify如果您使用fetchAPI ，则无需调用。

您可以从 JSON 对象中解构 URL，然后为该 URL 打开一个新选项卡以启动下载。

fetch('https://api.github.com/repos/portablemc/portablemc/releases/latest')
  .then(response => response.json())
  .then(json => {
    const { assets: [ { browser_download_url } ] } = json; // Destructure
    
    console.log(browser_download_url);                     // Log the URL
    
    window.open(browser_download_url, '_blank');           // Open a new tab
  });

如果您希望这是一个按钮，您可以编写如下函数：

const main = async () => {
  const btn = await initDownloadButton('#download-btn', {
    url: 'https://api.github.com/repos/portablemc/portablemc/releases/latest'
  });
  console.log(`Initialized: #${btn.id}`);
};

const initDownloadButton = async (btn, options) => {
  if (typeof btn === 'string') btn = document.querySelector(btn);
  const downloadUrl = await fetchLatestDownloadUrl(options.url);
  btn.addEventListener('click', () => {
    console.log(`Opening: ${downloadUrl}`);
    window.open(downloadUrl, '_blank')
  });
  return btn;
};

const fetchLatestDownloadUrl = async (url) => {
  const response = await fetch(url);
  const { assets: [ { browser_download_url } ] } = await response.json();
  return browser_download_url;
}

main();
<button id="download-btn">Download</button>

推荐阅读