调用getRooms后设置h3文本显示[object Object]，如何修复？

嗨，这个问题其实是没搞明白异步操作的返回值和执行时机导致的，我来给你拆解一下~

为什么会显示[object Object]？ #

你现在的代码里，$("#title").text(...)括号里传入的是api.rooms.getRooms().done(...)的返回值。而$.ajax()以及它链式调用的.done()返回的都是jqXHR对象（一个实现了Promise接口的异步操作容器），text()方法把这个对象直接转换成字符串，自然就显示成[object Object]了，根本没用到你请求回来的实际数据。

修复代码 #

核心思路是：等异步请求成功拿到数据后，再去设置#title的文本，而不是把异步操作对象直接传给text()。修改后的完整代码如下：

api.rooms = class {
    static get url() {
        return "http://127.0.0.1:8080/api/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)[0]; //Works OK!
        });
    }
}

$(document).ready(function() {
    // 先发起异步请求，在成功回调里更新DOM
    api.rooms.getRooms()
        .done(function(data) {
            console.log(JSON.stringify(data));
            $("#title").text(data); // 这里才是正确的设置时机
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            console.log("Request failed: jqXHR.status=" + jqXHR.status + ", textStatus=" + textStatus + ", errorThrown=" + errorThrown);
        });
});

更简洁的写法（可选） #

因为getRooms()返回的是兼容Promise的对象，你也可以用async/await让代码逻辑更线性：

$(document).ready(async function() {
    try {
        const data = await api.rooms.getRooms();
        console.log(JSON.stringify(data));
        $("#title").text(data);
    } catch (error) {
        console.log("Request failed:", error);
    }
});

这种写法避免了回调嵌套，可读性更强，注意await必须放在async标记的函数里就行。

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