解决JS调用REST API时出现的TypeError: then不是函数问题

错误原因分析 #

1. 混用await与.then()导致类型错误：await greetService.greet()会直接解析Promise并返回Response对象，而非Promise实例，所以调用.then()会抛出"不是函数"的错误。
2. 响应格式不匹配：后端返回纯文本字符串，但前端请求头指定Accept: application/json，fetch会尝试将响应解析为JSON，导致后续处理失败。
3. 未正确提取响应体内容：fetch返回的Response对象只是响应的元数据，需要调用.text()或.json()才能拿到实际返回的字符串内容。

修正后的代码 #

修改main.js如下：

$(document).ready(function(){
    viewIndex();
});

async function viewIndex() {
    try {
        const response = await greetService.greet();
        const greetText = await response.text(); // 提取纯文本响应体
        console.log('greet response:', greetText);
        $('#greetWorld').text(greetText); // 替换h2内容（用text比append更合适）
    } catch (err) {
        console.error('请求失败:', err);
    }
}

const greetService = {
    greet: async () => {
        return await http.fetch('/api/greet');
    }
};

const http = {
    fetch: async function(url, options = {}) {
        const response = await fetch(url, {
            headers: {
                'Accept': 'text/plain', // 匹配后端返回的纯文本格式
            },
            ...options,
        });
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`); // 处理HTTP错误状态码
        }
        return response;
    }
};

额外优化说明 #

• 用try/catch替代.catch()，更符合async/await的写法风格
• 替换append()为text()，避免重复加载时多次追加内容
• 添加HTTP错误状态码检查，比如404/500等情况会抛出错误
• 调整请求头Accept为text/plain，与后端返回的纯文本格式匹配，避免不必要的JSON解析错误

可选简化方案 #

如果不需要单独封装http.fetch，也可以直接在greetService里处理响应：

const greetService = {
    greet: async () => {
        const response = await fetch('/api/greet', {
            headers: { 'Accept': 'text/plain' }
        });
        if (!response.ok) throw new Error('请求失败');
        return response.text(); // 直接返回解析后的文本
    }
};

// 对应的viewIndex可以更简洁：
async function viewIndex() {
    try {
        const greetText = await greetService.greet();
        $('#greetWorld').text(greetText);
    } catch (err) {
        console.error(err);
    }
}

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