如何使用Fetch API从Koa后端获取并解析数据

const koa = require('koa');
const router = require('koa-router');
const cors = require('koa2-cors'); // 引入CORS中间件
const app = new koa();

// 使用CORS中间件，允许跨域请求
app.use(cors());

const _ = router();
const port = 3000;

// 定义GET请求的路由
_.get('/', async (ctx) => {
    const result = "good morning";
    console.log("后端发送数据:", result); // 后端控制台输出
    ctx.body = result; // 设置响应体
});

// 将路由应用到Koa应用
app.use(_.routes());

// 启动服务器
app.listen(port, () => {
    console.log(`Koa Server listening on port ${port}`);
});

// 假设submitButton是页面上的一个按钮
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', async () => {
    fetch(`http://localhost:3000/`)
        .then(res => {
            console.log("原始Response对象:", res); // 打印Response对象
            // 此时res是一个Response对象，不是数据本身
        })
        .catch(error => console.error("Fetch请求出错:", error));
});

// 假设submitButton是页面上的一个按钮
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', async () => {
    fetch(`http://localhost:3000/`)
        .then(res => {
            // 检查响应是否成功 (HTTP状态码在200-299之间)
            if (!res.ok) {
                throw new Error(`HTTP error! status: ${res.status}`);
            }
            // 根据后端返回的数据类型选择解析方法
            // 如果后端返回的是JSON，使用res.json()
            // 如果后端返回的是纯文本，使用res.text()
            return res.text(); // Koa后端返回的是纯文本 "good morning"
        })
        .then(data => {
            console.log("前端接收到的数据:", data); // 打印解析后的数据
            // 此时data就是 "good morning"
            alert(`从后端获取到: ${data}`); // 也可以使用alert显示
        })
        .catch(error => {
            console.error("Fetch操作失败:", error); // 捕获并处理任何错误
            alert(`数据获取失败: ${error.message}`);
        });
});