javascript - 一个接一个地调用一个函数已经在本地存储中设置了项目

Question

我目前正在尝试根据我的本地存储 内容执行两项操作。

我的项目使用 ReactJS，但由于我不知道如何全局设置状态，或通过父子组件来回传播我的数据，我决定使用本地存储来完成。

我正在尝试为登录用户分配 Angular 色和权限。为此，我有两个单独的提取函数，只要我的用户通过identity federation broker 进行身份验证，我就会执行这两个函数。

这是我在单独的 UserAuthorization.js 文件中的第一个函数:

function UserAuthorisation() {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role", response[eachUser].role);
          }
        }
      });
  } else {
    console.log("We don't have the user ID item");
  }
}

export default UserAuthorisation;

这是应该在 UserAuthorization.js 之后运行的第二个函数:

function FetchUserPermissions() {
  const userRole = localStorage.getItem("role");
  console.log(userRole);
  if (userRole !== null) {
    fetch("https://api.myjsons.com/binz/xxzsz")
      .then(response => response.json())
      .then(response => {
        for (let permission = 0; permission < response.length; permission++) {
          if (permission === response[permission]) {
            console.log(response[permission], "<<<<<<< This is the user Role");
            return response[permission];
          }
        }
      });
  } else {
    console.log("not loggedin === no user permissions.");
  }
}

export default FetchUserPermissions;

我遇到的问题是，由于我只是按函数名称调用我的函数，第二个 FetchUserPermissions 打印出一个 null 而不是 用户 Angular 色。

我以为是因为我试图在设置 Angular 色之前从本地存储中获取 Angular 色，但是当我更改为 async await 函数时，我得到了一个结果 cannot read property .length未定义的

如何在第一个函数之后调用第二个函数并从本地存储中获取我的 Angular 色元素？？

提前为这个愚蠢的问题道歉..

Answer 1

你说得对。发生这种情况是因为当 FetchUserPermissions 调用 UserAuthorisation 时无法及时将 Angular 色设置到 localStorage 中。简单的解决方案是从 UserAuthorisation 返回 Promise 并在 then() 中调用 FetchUserPermissions。

function UserAuthorisation() {
  const userid = localStorage.getItem("userid"); //GETS THE TOKEN SET BY IFB.

  if (userid !== null) {
    return fetch("https://api.myjsons.com/binz/examplebin")
      .then(response => response.json())
      .then(response => {
        for (let eachUser = 0; eachUser < response.length; eachUser++) {
          if (userid === response[eachUser].id) {
            localStorage.setItem("role", response[eachUser].role);
          }
        }
      });
  } else {
    console.log("We don't have the user ID item");
  }

  return Promise.resolve();
}

export default UserAuthorisation;

用法。

UserAuthorisation().then(() => {
  FetchUserPermissions();
});

给你的小例子。

function first() {  
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('1');
      
      resolve();
    }, 1000);
  });
}

function second() {
  console.log('2');
}

second(); // 2
first().then(second); // 1 -> 2

在这里阅读更多关于 Promises 的信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise或这里 https://javascript.info/promise-basics .