为何出现ReferenceError: db is not defined？axios连接MySQL问题排查

1. 核心错误：ReferenceError: db is not defined #

你的路由文件avengerRouter.js直接使用了db变量，但该变量仅在后端主文件（标注为HomePage的server.js）中定义，路由文件无法跨文件访问这个局部变量。解决方法是将数据库连接封装为独立模块，在需要的地方统一引入：

步骤1：创建数据库连接模块 #

新建db.js文件，专门管理数据库连接：

const mysql = require('mysql')

const db = mysql.createConnection({
    user     : 'root',
    password : '******',
    database : 'avengers'
})

db.connect((err) => {
    if(err){
        console.log(err)
    }
    console.log('MySql Connected...')
})

module.exports = db

步骤2：修改后端主文件 #

替换原有的数据库连接代码，改为引入新创建的db模块：

const express = require('express')
const app = express()
const morgan = require('morgan')
// 引入数据库连接模块
const db = require('./db.js')

//middleware
app.use(express.json())
app.use(morgan('dev'))

//Routes
app.use('/avengers', require('./routes/avengerRouter.js'))

//error handling
app.use((err, req, res, next) => {
    console.log(err)
    return res.send({errMsg: err.message})
})

app.listen(9000, () => {
    console.log("The server is running on port 9000")
})

步骤3：在路由文件中引入db #

修改avengerRouter.js，添加db模块的引入，并修复响应逻辑：

const express = require('express');
const avengerRouter = express.Router();
// 引入数据库连接模块
const db = require('../db.js')

avengerRouter
    // all data from avengers table http://localhost:9000/avengers
    .get('/', (req, res) => {
        let sql = 'SELECT * FROM avengers.avengers'
        db.query(sql, (err, result) => {
            if(err) {
                console.log(err)
                // 错误时向前端返回错误信息
                return res.status(500).send({errMsg: err.message})
            }
            // 成功时将查询结果返回给前端
            res.json(result)
        })
    })

module.exports = avengerRouter;

2. 修复前端axios异步逻辑错误 #

前端代码中axios.get与await delay的写法混乱，导致无法正确捕获响应。移除无用的延迟函数，改用标准异步写法：

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import AvengersTable from './AvengerTable.js'

export default function Main(){
    const [tableState, setTableState] = useState([])

    useEffect(() => {
        async function getTableData() {
            try {
                const res = await axios.get('/avengers')
                console.log(res)
                setTableState(res.data)
            } catch (err) {
                console.log(err.response?.data?.errMsg || '请求失败')
            }
        } 
        getTableData()
    }, [])

    return (
        <div className="Main">
            <AvengersTable tableState={tableState}/>
        </div>
    )
}

额外优化说明 #

• 移除了无意义的delay函数，异步请求本身已具备异步特性，无需额外延迟
• 将前端状态初始值改为空数组[]，更符合列表数据的类型预期
• 路由中补充了错误响应逻辑，确保前端能捕获并展示错误信息
• 使用res.json()替代res.send()，更适配JSON格式的数据返回场景

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