如何在页面初始加载时用fetch()从MySQL取数填充JS数组并复用

你的核心问题是**fetch是异步操作**，代码里loadList()在请求还没拿到数据时就执行了，这时候allTrackFiles还是空数组，所以表格不会渲染任何内容。下面是两种修复方式，都能保证数组填充后再执行后续操作，同时保留全局数组方便复用。

方式一：调整.then()的执行顺序 #

把loadList()放在fetch的第二个.then()里，确保数据拿到并赋值给数组后再渲染表格：

<html>
<head> </head>

<body>
<div class="container-lg p-5">
  <table class="table table-striped align-left one-line-text">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Track</th>
        <th>Series</th>
        <th>Date</th>
        <th>Day</th>
        <th>File Name</th>
      </tr>
    </thead>

    <tbody id="table">
      <!-- Content -->
    </tbody>
  </table>
</div>

<script>
var allTrackFiles = []

// 调整顺序：拿到数据后再调用loadList
fetch("files/get.php")
  .then((res) => res.json())
  .then((data) => {
    allTrackFiles = data
    loadList() // 数据填充后再执行渲染
  })
  .catch(err => console.error('请求出错:', err)) // 增加错误捕获，方便排查问题

function loadList() {
  const table = document.getElementById("table")
  // 先清空表格，避免重复渲染（如果后续重新调用的话）
  table.innerHTML = ''
  for (var i = 0; i < allTrackFiles.length; i++) {
    var obj = allTrackFiles[i]
    var row = table.insertRow(i)

    for (var key in obj) {
      var value = obj[key]
      if (key != "file_src") {
        row.insertCell().innerHTML = value
      } else {
        row.insertCell().innerHTML =
          "<a href='../tracks/" + value + "'>" + value + "</a>"
      }
    }
  }
}
</script>
</body>
</html>

方式二：用async/await（更直观，适合新手理解） #

async/await是异步代码的语法糖，能让异步代码看起来像同步代码，逻辑更清晰：

<html>
<head> </head>

<body>
<div class="container-lg p-5">
  <table class="table table-striped align-left one-line-text">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Track</th>
        <th>Series</th>
        <th>Date</th>
        <th>Day</th>
        <th>File Name</th>
      </tr>
    </thead>

    <tbody id="table">
      <!-- Content -->
    </tbody>
  </table>
</div>

<script>
var allTrackFiles = []

// 用async函数包裹异步逻辑
async function init() {
  try {
    const res = await fetch("files/get.php")
    const data = await res.json()
    allTrackFiles = data
    loadList() // 数据就绪后渲染
  } catch (err) {
    console.error('请求出错:', err)
  }
}

// 页面加载时执行初始化
init()

function loadList() {
  const table = document.getElementById("table")
  table.innerHTML = ''
  for (var i = 0; i < allTrackFiles.length; i++) {
    var obj = allTrackFiles[i]
    var row = table.insertRow(i)

    for (var key in obj) {
      var value = obj[key]
      if (key != "file_src") {
        row.insertCell().innerHTML = value
      } else {
        row.insertCell().innerHTML =
          "<a href='../tracks/" + value + "'>" + value + "</a>"
      }
    }
  }
}
</script>
</body>
</html>

关键说明 #

• 异步操作的顺序：fetch发送请求后，浏览器会继续执行后面的代码，不会等待请求返回。必须把依赖数据的操作（比如loadList()）放在请求完成的回调里，或者用await等待请求完成。
• 全局数组复用：allTrackFiles是全局变量，后续你可以在其他函数里直接使用这个数组，比如做筛选、排序等操作，不需要再次请求数据。
• 错误捕获：增加.catch()或try/catch能帮你排查请求失败的问题（比如get.php路径错误、数据库查询失败等）。

内容的提问来源于stack exchange，提问作者TheManOfSteell