Question

将承诺的结果映射到数组变量时，映射等待承诺，但在值映射发生之前，数组变量作为未解析的承诺返回。

使用 axios.get() 调用 api 并将结果映射到变量的代码：

  // Look for user's publications

  const usersPub: Ipub[] = await Publication.find();

  const updatePub = usersPub.filter(
    (p: Ipub) => p.creator.identifier === specificUser.id
  );

  // update photo

  try {
    if (banner !== "") {
      specificUser.banner = banner;
    } else if (perfil !== "") {
      specificUser.perfil = perfil;
      updatePub.map((pub: Ipub) => (pub.creator.perfil = perfil));
      await updatePub.save();
    }

    await specificUser.save(); 

    return res.json(specificUser);
  } catch (err) {
    console.log(err);
    return res.status(500).json({ Error: "The API Failed" });
  }

使用refreshTableData返回结果的函数：

const refreshTableData = async () => {
    
    const clientState = getAccessTokenAndUrl();
    let rowDataArray = [];

    try {
        let healthStatusResults = await axios.get(
            {
                baseUrl: clientState.apiUrl,
                url: 'some/api/url/path',
                responseType: 'json',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': ('Bearer ' + clientState.jssAccessToken)
                },
                params: {
                    isValid: false,
                    systemName: 'some_system_name'
                }
                // potentially add validate status to communicate 400 and 500 level errors
            }
        );

        healthStatusResults.devices.map(
            (device) =>{
                console.log('device: ', device);
                rowDataArray.push([
                    device.deviceId,
                    device.isValid
                ]);
        });
    } catch (error) {
        // potentially add error message react component here
        const errorMessage = 'Error - healthStatus api response error: ' + error;
        console.log(errorMessage);
        // alert(errorMessage);
    }

    console.log('refreshTableData - rowDataArray: ', rowDataArray);
    return (rowDataArray);
}

React 组件 DeviceStatusTable 调用生成行：

const generateRows = (rowDataArray) => {
    console.log('DevicesStatusTable - rowDataArray: ', rowDataArray);
    let rows = [];
    
    for (let i = 0; i < rowDataArray.length; i += 1) {
        let columnDataArray = [rowDataArray[i][0], rowDataArray[i][1]];
        rows.push(<DeviceStatusRow columnDataArray={columnDataArray} key={'statusRow-' + i} />);
      };

    return rows;
};

React 组件 HealthDashboard 调用 DeviceStatusTable 并将 refreshTableData() 的结果作为 props 传入：

export const DeviceStatusTable = (props) => {
    return (
        <div>
            <table>
                <DeviceStatusHeader systemName={props.systemName} />
                <tbody>
                    {generateRows(props.rowDataArray)}
                </tbody>
            </table>
        </div>
    );
};

注意 console.log() 语句的顺序和值：

export const HealthDashboard = () => {
    return (
        <div>
            <DeviceStatusTable systemName="Minestar Edge" rowDataArray={refreshTableData()}/>
        </div>
    );
};

我希望 rowDataArray 值在它得到解决之前不会返回给 generateRows，而是作为承诺传回。同时，映射进程确实等待承诺解析，并且相关联和后续日志在来自 generateRows 函数的日志之后返回。

为什么在解决填充 rowDataArray 的 healthStatusResults 承诺之前从 refreshTableData 返回 rowDataArray？

Answer 1

refreshTableData 是一个异步函数，因此它返回一个 Promise，这就是您分配给 rowDataArray 的内容。

改变

{generateRows(props.rowDataArray)}

到

{props.rowDataArray.then(generateRows)}

为什么基于承诺映射的变量在承诺解析之前返回？

1 个答案: