为何getLocalStorageItem返回值未存入变量？如何等待异步结果？

1. getLocalStorageItem未返回异步操作的Promise：函数内部调用makeRequest发起异步请求后，没有返回这个请求的Promise对象，then回调里的return只是回调函数的返回值，不会被外层函数接收。这导致getLocalStorageItem执行后直接返回undefined，完全不会等待异步请求完成。
2. getColumns是同步函数，无法等待异步结果：你在同步函数里直接调用异步操作的函数，同步代码会直接往下执行，不会等待异步请求的响应返回，所以localStorageColumns拿到的是undefined，且getColumns里的断点会先触发，异步请求的断点要等同步代码执行完才会触发。

1. 修复getLocalStorageItem，让它返回Promise #

修正函数，返回makeRequest的Promise链，同时修复原代码里的语法错误（catch的括号未闭合）：

export const getLocalStorageItem = (key, defaultValue = null) => {
  const user = loadedStore.getState().session.user;
  // 返回整个Promise链，让外部可以等待异步结果
  return makeRequest(`/account/${user.id}/localstorage`, 'get').then((response) => {
    try {
      if (_.isNull(response.json.localstorage)) {
        return defaultValue;
      }
      const formattedKey = `${key}_${user.id}`;
      return response.json.localstorage[formattedKey] 
        ? JSON.parse(response.json.localstorage[formattedKey].replaceAll("'", '"')) 
        : defaultValue;
    } catch (err) {
      console.log(err); // eslint-disable-line no-console
      // 捕获错误后返回默认值，避免Promise抛出未处理的错误
      return defaultValue;
    }
  });
};

2. 修改getColumns为异步函数，用await等待结果 #

因为要等待异步请求的结果，需要把getColumns改成async函数，并用await调用getLocalStorageItem：

async getColumns() {
  const { permissions } = this.props;
  let columns = getPartnerColumns(permissions);
  const columnOptions = getPartnerColumns(permissions);
  
  if (permissions === 'admin') {
    // 用await等待Promise完成，拿到实际返回值
    const localStorageColumns = await getLocalStorageItem(this.localStorageColumnConfigurationKey);
    if (localStorageColumns) {
      columns = localStorageColumns.map((c) => columnOptions.find((opt) => opt.id === c)).filter(Boolean);
    }
  }
  // 注意：async函数返回的是Promise，调用这个函数的地方需要用await或者.then处理
  return columns;
}

额外注意 #

调用getColumns的地方也要适配异步逻辑：如果是在类组件的生命周期（比如componentDidMount）里调用，要把生命周期函数改成async；如果是函数组件，要放在useEffect里配合异步函数使用。

内容的提问来源于stack exchange，提问作者Pedro Cerejeira Prncipe Ferrei