如何将数据从节点 js 发送到 axios 以响应 js

Question

我目前正在用 react js 构建一个 web 应用程序，并偶然发现了 axios。 我是 axios 的新手，对它的经验很少。 到目前为止，我一直在使用我的 http 请求从我的反应应用程序到我的节点/快速服务器的获取请求。 目前我有我的节点服务器调用 MySQL 查询。 这是获取请求：

app.get('/getAllBusinessAccountsTransactions', function(request, response) {
var {userID, accountID} = request.query;
const getAllBusinessAccountsTransactions = `CALL GetUniqueBusinessUniqueAccountTransactions('${userID}', '${accountID}')`;

mysqlConnection.query(getAllBusinessAccountsTransactions, (error, result) => {
    if(error) {
        console.log(error);
    } else {
        console.log('SUCCESSFULLY RETRIEVED THE TRANSACTIONS!!!');
        var test = {result};

        console.log({"test": test.result[0]});
        response.status(200).send(
            {"blah": test.result[0]}
        )
    }
})
})

这个获取请求似乎工作正常。 当我用 console.log({"test": test.result[0]}); 打印出结果时这是我得到的回复：

{ test: [ RowDataPacket { TransactionID: 38, Date: '0000-00-00', Description: 'test', Debit: 50, Credit: 0, Connection: 'undefined', AccountID: 19 }, RowDataPacket { TransactionID: 39, Date: '0000-00-00', Description: 'test two', Debit: 50, Credit: 0, Connection: 'undefined', AccountID: 19 }, RowDataPacket { TransactionID: 40, Date: '0000-00-00', Description: 'a', Debit: 50, Credit: 0, Connection: 'undefined', AccountID: 19 } ] }

结果在我看来没问题。 这是我在我的反应应用程序中使用的 axios function 来调用这个获取请求。

getProducts () {
        var accountIDValue = '19';
        return axios.get('http://localhost:8080/getAllBusinessAccountsTransactions?userID=' + localStorage.getItem('currentUserID') + '&accountID=' + accountIDValue)
            .then((response) => {
                console.log('TEST MY NEW AXIOS');
                console.log(response.data.blah);
            })   
    }

同样，当我测试打印 axios 请求的结果时，我得到了预期的对象数组。 现在这里是我怀疑我的错误来自哪里。 下面是相关代码，其中我调用前面的axios function：

const DataTableResponsiveDemo = () => {
    const [products, setProducts] = useState([]);
    const productService = new ProductService();

    useEffect(() => {
        console.log('GOLLY TESTING');
        console.log(productService.getProducts());
        productService.getProducts().then(blah => setProducts(blah));
    }, []); // eslint-disable-line react-hooks/exhaustive-deps

我没有收到此代码错误...这意味着我的 web 应用程序不会崩溃。 但是，我正在尝试使用此 function 将数据设置为 state 的数据填充表。 但是，当我打印出使用 console.log(productService.getProducts()); 调用 function 的结果时； 我在控制台中打印出这种奇怪的行为：

总而言之，我在节点获取请求中的查询检索了预期的数据。 数据正确地发送到我的 axios function （至少在从节点检索数据时打印它时）。 但是，当我调用 axios function 时，我收到了这个奇怪的 promise 待处理消息并且我的对象数组不存在。 这可能与我从节点获取请求发送数据的方式有关吗？ 如果这看起来像一个简单的问题，我深表歉意……就像我说的那样，我目前正在尝试了解 axios 并且很难弄清楚问题所在。 非常感谢您的帮助！

Answer 1

首先，您的 getProducts function 应该是异步的，因为它正在发出 http 请求。

async getProducts() {
    var accountIDValue = '19';
    return await axios.get('http://localhost:8080/getAllBusinessAccountsTransactions?userID=' + localStorage.getItem('currentUserID') + '&accountID=' + accountIDValue));   
}

然后在你的效果挂钩中：

useEffect(() => {
    console.log('GOLLY TESTING');
    console.log(productService.getProducts());
    const response = productService.getProducts();
    setProducts(response.data);
}, []);

我认为这里缺少的部分是 async/await 位。 我相信您拥有的 .then 语句仍然可以正常工作，但这是另一种方法。 让我知道这是否适合您！