如何將數據從節點 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 語句仍然可以正常工作，但這是另一種方法。 讓我知道這是否適合您！