Promise 被解析为 undefined

Question

很抱歉，如果这是一个简单的问题，我是新手 javascript

所以我有简单的 axios GET 请求。它在我的代码中被使用了三次，所以我想我可以把它做成一个外部函数，以避免重复代码，让它更清晰易读

问题是当我调用该函数时，return 值未定义。这是因为代码像同步一样工作。所以我认为我需要使函数 return 成为一个 Promise，并且在函数调用中我必须使用 async/await 或 then 语法来在正确的时间获得响应。但经过多次尝试后，代码仍然是运行作为同步

我阅读了很多关于 promises 及其工作原理的理论，对它们何时改变状态有了深刻的理解，但是当我尝试自己实现它们时出现了问题

这是检索数据的函数

const getMessagesFromChat = async (JWT_header, chatId) => {

    if (JWT_header !== '') {
        //1 let messages
        //4 return
        axios.get(`${SECURED_API_PATH}/messages/chat/${chatId}`, {
            headers: {authorization: JWT_header},
            params: {size: 80, page: 0}
        })
            .then(response => {
                console.log('messages (fetch)', response.data)
                //1 messages = response.data
                //1 return messages
                return response.data  //2
                //3 return Promise.resolve(response.data)
            })
            .catch(error => {
                console.log(error, error.response)
            })
        //5 return Promise.resolve(messages)
    }
}

我根据我的尝试用数字标记了评论

创建一个变量并return它在then块
make 函数 async 所以它 return 的所有内容都包含在 promise
return 在 then 块

Promise.resolve()

return 整个请求作为承诺
return 在请求后使用 Promise.resolve() 明确承诺

除 4 个之外的所有响应均未定义。在 4 种变体日志语句中显示的是 promise 对象本身而不是 promise 值。在其他变体中，日志语句首先显示“未定义”响应，然后显示来自请求的实际响应我试图实施第二个建议但它没有用。

这是我尝试用来获取结果的函数 (onClick)##

const selectChat = () => {
        const JWT_header = getToken()
        if (JWT_header !== null) {
             try {
                 const messages = await getMessagesFromChat(JWT_header, chatId)
                 console.log('messages (after fetch)', messages)
                 //setMessages(messages)
             } catch (error) {
                 console.log(error)
             }
        } else {
            setIsLoggedIn(false)
        }

或

const selectChat = () => {
        const JWT_header = getToken()
        if (JWT_header !== null) {
             getMessagesFromChat(JWT_header, chatId)
             .then(response => {
                console.log(response)
                setMessages(response)
              })
             .catch (error =>console.log(error))
        } else {
            setIsLoggedIn(false)
        }

但其中 none 按预期工作

我做错了什么？

Answer 1

您的函数没有 return 任何东西。 then 回调中的 return 语句是不够的，您仍然需要 return 来自外部函数的承诺链本身。

使用任一 .then() 语法：

function getMessagesFromChat(JWT_header, chatId) { // no `async` here
    if (JWT_header !== '') {
        return axios.get(`${SECURED_API_PATH}/messages/chat/${chatId}`, {
//      ^^^^^^
            headers: {authorization: JWT_header},
            params: {size: 80, page: 0}
        }).then(response => {
            console.log('messages (fetch)', response.data)
            return response.data
        })
    } else {
        return Promise.resolve(undefined)
//      ^^^^^^ important for chaining
    }
}

或async/await语法：

async function getMessagesFromChat(JWT_header, chatId) {
    if (JWT_header !== '') {
        const respnse = await axios.get(`${SECURED_API_PATH}/messages/chat/${chatId}`, {
//                      ^^^^^
            headers: {authorization: JWT_header},
            params: {size: 80, page: 0}
        });
        console.log('messages (fetch)', response.data)
        return response.data
    }
    // else return undefined
}

Promise 被解析为 undefined

Promise is resolved to undefined

javascript

asynchronous

promise

reactjs

这是检索数据的函数

这是我尝试用来获取结果的函数 (onClick)##

或