Promise 解析函数返回 undefined

如何解决Promise 解析函数返回 undefined

我为我想要使用的 API 编写了一个实用程序包装器。包装器处理请求构建和令牌获取。

从'./refreshToken'导入refreshToken

/**
 * Fetch util handles errors,tokens and request building for the wrapped API calls
 * @param {string} url Request URL e.g. /chargehistory
 * @param {string} requestMethod Request Method [GET,POST,PUT,DELETE]
 * @param {object} requestBody Request Body as JSON object
 * @param {object} retryFn The caller function as object reference to retry
 * @private This function is only used as util in this class
 * @async
 */
const fetchUtil = (url,requestMethod,requestBody,retryFn) => {
    // Block thread if the token needs to be refetched
    if(sessionStorage.getItem('token') == null || Number(sessionStorage.getItem('token_expiration')) < new Date().getTime()) {
        refreshToken()
    }        

    let request = {
        method: requestMethod,headers: {
            'Authorization': `Bearer ${sessionStorage.getItem('token')}`,'Content-Type': 'application/json'
        }
    }
    if(requestMethod === 'POST' || requestMethod === 'PUT') {
        request.body = JSON.stringify(requestBody)
    }

    fetch(`${process.env.REACT_APP_API}${url}`,request)
    .then(response => {
        if(response.ok) {
            return response.json()
        } else if(response.status === 401) {
            refreshToken().then(() => retryFn())
        } else {
            console.error(`Error on fetching data from API: ${response.status},${response.text}`)
        }
    })
    .then(json => {
        console.log(json)
        return json
    })
    .catch(error => console.error(error))
}

这会起作用，并在解决后将一些 json 打印到控制台。接下来我构建了使用这个抽象的函数：

/**
 * Get a list of all completed charge sessions accessible by the current user matching the filter options.
 */
const getChargehistory = (installationId) => {
    console.log(fetchUtil(`/chargehistory?options.installationId=${installationId}`,'GET',{},getChargehistory))
}

打印 undefined 我可以理解，虽然我确实期望函数引用或承诺。
我尝试在 fetchUtil 和调用方和 async fetchUtil 之前添加 await。这给了我一个错误，没有在 undefined 上调用 await。我也尝试将它重新编写成一个根本不起作用的钩子。
我需要组件的 useEffect 钩子中的数据：

const Cockpit = () => {
    const { t } = useTranslation()
    const [chargehistory,setChargehistory] = useState(undefined)
    const [installationreport,setInstallationreport] = useState(undefined)

    useEffect(() => {
        setChargehistory(getChargehistory)
        setInstallationreport(getInstallationreport)
    },[])
}

为什么我会收到 undefined，我该如何解决？

解决方法

在您的 fetchUtil 函数中，它以没有返回值结束，这意味着您的 fetchUtil 函数将隐式返回 undefined。

你说

fetch(`${process.env.REACT_APP_API}${url}`,request)
    .then(response => {
        if(response.ok) {
            return response.json()
        } else if(response.status === 401) {
            refreshToken().then(() => retryFn())
        } else {
            console.error(`Error on fetching data from API: ${response.status},${response.text}`)
        }
    })
    .then(json => {
        console.log(json) // (1) 
        return json
    })
    .catch(error => console.error(error))

在这个函数中，(1) 部分运行良好，对吗？

我认为，如果您像下面那样更改代码，它会起作用。

首先，像这样更新您的 fetchUtil 代码。返回获取。

const fetchUtil = (url,requestMethod,requestBody,retryFn) => {
    // Block thread if the token needs to be refetched
    if(sessionStorage.getItem('token') == null || Number(sessionStorage.getItem('token_expiration')) < new Date().getTime()) {
        refreshToken()
    }        

    let request = {
        method: requestMethod,headers: {
            'Authorization': `Bearer ${sessionStorage.getItem('token')}`,'Content-Type': 'application/json'
        }
    }
    if(requestMethod === 'POST' || requestMethod === 'PUT') {
        request.body = JSON.stringify(requestBody)
    }

    // return fetch here! it will return a promise object. 
    return fetch(`${process.env.REACT_APP_API}${url}`,${response.text}`)
        }
    })
    .then(json => {
        console.log(json)
        return json
    })
    .catch(error => console.error(error))
}

其次，像这样更新您的 getChargehistory。

const getChargehistory = async (installationId) => {
    const result =  await fetchUtil(`/chargehistory?options.installationId=${installationId}`,'GET',{},getChargehistory)
    console.log(result);
}

因为我无法完全访问您的代码，所以仍然可能存在错误，但我希望这会有所帮助！