Promise 被解析为 undefined

Question

对不起，如果这是一个简单的问题，我是 javascript 新手

所以我有简单的 axios GET 请求。它在我的代码中使用了 3 次，所以我认为我可以将它作为外部函数，以避免重复代码，使其更清晰易读

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

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

这里是检索数据的函数

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)
    }
}

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

1. 创建一个变量并在then块中返回它
2. make function async 所以它返回的所有内容都包含在 promise 中
3. 在then 块中使用Promise.resolve() 返回明确的承诺
4. 将整个请求作为承诺返回
5. 在请求后使用Promise.resolve()返回明确的承诺

除 4 之外的所有响应均未定义。在 4 变种日志语句中显示了 promise 对象本身而不是 promise 值。在其他变体中，日志语句首先显示“未定义”响应，然后显示来自请求的实际响应 我试图实施第二个建议 https://stackoverflow.com/questions/45620694/how-to-return-response-of-axios-in-return/45622080 但它没有用。

这是我试图用来获取结果的函数（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)
        }

但它们都没有按预期工作

我做错了什么？

Answer 1

你的函数没有return 任何东西。 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
}