如何在外部JS文件中获取getRooms函数返回的API数据？

嘿，我帮你找出几个导致代码失效的问题，以及对应的修复方案：

问题1：没搞懂异步操作的特性 #

$.ajax 是异步请求，它返回的不是你想要的房间数组，而是一个Promise对象。你直接用getRooms()[0]去取第一个元素，相当于在Promise对象上硬捞索引0，肯定拿不到实际数据。

问题2：拼写小错误 #

你在getRooms里写的是api.room.url，但你的房间类是api.rooms，这里少了个s，会导致请求地址错误，根本发不出正确的请求。

问题3：Promise回调没返回处理后的数据 #

你的then回调里执行了data.rooms.map(item => item.name)，但没把这个处理后的数组return出去，所以Promise最终不会把房间名称数组传递给后续的调用。

修正后的api.js代码 #

var api = class {
  static get baseUrl() {
    return "http://127.0.0.1:8080/api/";
  }
  static get timeout() {
    return 60 * 1000;
  }
}

api.rooms = class {
  static get url() {
    return api.baseUrl + "rooms/";
  }
  static getRooms() {
    return $.ajax({
      url: api.rooms.url, // 修正拼写错误
      method: "GET",
      dataType: "json",
      timeout: api.timeout
    }).then(function(data) {
      return data.rooms.map(item => item.name); // 加上return，把处理后的数组传递出去
    });
  }
}

主JS文件的正确调用方式 #

因为getRooms现在返回的是一个能拿到房间数组的Promise，你需要用下面两种方式之一来接收异步结果：

方法1：用Promise的then链式调用

$(document).ready(function() {
  api.rooms.getRooms().then(function(roomNames) {
    // 先判断数组是否有数据，避免报错
    if (roomNames.length > 0) {
      $("#title").text(roomNames[0]);
    } else {
      $("#title").text("暂无房间数据");
    }
  }).catch(function(error) {
    // 处理请求失败的情况
    console.error("获取房间数据失败:", error);
    $("#title").text("加载失败");
  });
});

方法2：用async/await（更像同步代码，可读性更高）

$(document).ready(async function() { // 给ready回调加上async关键字
  try {
    const roomNames = await api.rooms.getRooms();
    if (roomNames.length > 0) {
      $("#title").text(roomNames[0]);
    } else {
      $("#title").text("暂无房间数据");
    }
  } catch (error) {
    console.error("获取房间数据失败:", error);
    $("#title").text("加载失败");
  }
});

这样就能正确获取到getRooms返回的房间名称数组，顺利取出第一个元素显示在#title里啦。

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