使用jQuery的$.get()获取数据后无法在请求外部读取该如何解决

核心原因 #

$.get() 是 jQuery 封装的异步 AJAX 请求，代码执行时会先发送网络请求，不会等待请求返回结果就直接运行后面的同步代码，因此你在请求外部直接读取 allImages、totalImgs 这类变量时，loaddata 函数还没被触发，变量还处于初始的空值状态。
另外你现有代码里有个笔误：loaddata 中连续两次给 firstImg 赋值，实际是要给 lastImg 赋值的逻辑写错了。 #

解决方案 #

方案1：所有依赖数据的逻辑放在回调中执行 #

这是最简单的适配方案，所有需要用到接口返回数据的操作，都放在 loaddata 函数内部执行，或者在 loaddata 末尾触发对应的处理函数即可。
修正后的前端代码如下：

// 先声明全局变量
let allImages= []
let firstImg = ''
let lastImg = ''
let totalImgs = 0
let currentImgIndex = 0  

// 发送请求
$.get('/links', (data) => {
  loaddata(data);
})

function loaddata(inpArr){
  totalImgs = inpArr.length
  firstImg = inpArr[0]
  // 修正之前的笔误，把lastImg赋值写对
  lastImg = inpArr[totalImgs-1]
  allImages = inpArr
  // 后续所有需要用到这些数据的逻辑，都在这里调用，比如：
  renderImageList()
  initCarousel()
}

// 示例：依赖数据的处理函数
function renderImageList() {
  console.log('所有图片列表：', allImages)
  console.log('第一张图：', firstImg)
  console.log('最后一张图：', lastImg)
}

方案2：用async/await封装请求（更易维护） #

如果后续异步逻辑多，可以用Promise封装请求，用async/await的同步写法处理异步逻辑：

let allImages= []
let firstImg = ''
let lastImg = ''
let totalImgs = 0
let currentImgIndex = 0  

// 封装请求为Promise
function getImageLinks() {
  return new Promise((resolve) => {
    $.get('/links', (data) => {
      resolve(data)
    })
  })
}

// 所有逻辑放在async函数中执行
async function init() {
  const data = await getImageLinks()
  totalImgs = data.length
  firstImg = data[0]
  lastImg = data[totalImgs-1]
  allImages = data
  // 后续直接正常使用变量即可
  console.log(allImages)
}
// 启动初始化
init()

后端代码优化建议 #

你当前读取 links.txt 时如果文件末尾有空行，分割后会得到空字符串，建议加一层过滤去掉无效值：

var express = require('express')
var fs = require('fs');
var array = fs.readFileSync('links.txt').toString().replace(/\r\n/g,'\n').split("\n");
// 新增过滤，去掉空字符串
array = array.filter(item => item.trim() !== '')
for(i in array) {
    console.log(array[i]);
}
app = express()

app.use(express.static(__dirname))

app.get('/links', (req, res) => {
    res.send(array)
})

app.listen(3000)

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