javascript中的变量不会改变[关闭]

Question

我有这样的代码，console.log(token) 显示 undefined。

  var token;
  store.get('userTokens').then(res => {
    token = res.idToken.jwtToken;
    console.log(res.idToken.jwtToken);
  });
  switch (type) {
    case 'get':
      console.log(token);
      Axios.get(baseUrl + url, {
        headers: {
          Authorization: `Bearer ${token}`,
          extraHeaders,
        },
      })
        .then(res => {
          console.log(res);
          return res;
        })
        .catch(err => {
          console.log(err);
          return err;
        });
      break;
  }

Answer 1

在来自store.get 的承诺被解决（或拒绝）后，您需要将switch 语句移动到一个位置。

  var token;
  store.get('userTokens').then(res => {
    token = res.idToken.jwtToken;
    switch (type) {
      case 'get':
        console.log(token);
        Axios.get(baseUrl + url, {
          headers: {
            Authorization: `Bearer ${token}`,
            extraHeaders,
          },
        })
        .then(res => {
          console.log(res);
          return res;
        })
        .catch(err => {
          console.log(err);
          return err;
        });
      break;
    }
  });

或者您可以使用await 等待store.get 函数返回res

Answer 2

您必须小心在 ajax 回调方法之外使用来自 ajax 调用的数据。请求是异步的，通常您的请求尚未完成，但您已经在尝试使用存储响应数据的变量。

由于您使用的是 react，因此请尝试创建一个名为 token 的状态变量，然后在使用您的 switch 语句之前监听它的变化。

正如其他人所建议的那样，根据您当前的情况，您需要这样做：

var token;
store.get('userTokens').then(res => {
    token = res.idToken.jwtToken;
    // Check if token has value before you use it.
    if(token)
    {
        switch (type) {
            case 'get':
                console.log(token);
                Axios.get(baseUrl + url, {
                    headers: {
                        Authorization: `Bearer ${token}`,
                        extraHeaders,
                    },
                })
                .then(res => {
                    console.log(res);
                    return res;
                })
                .catch(err => {
                    console.log(err);
                    return err;
                });
          break;
        }
    }
});

为避免错误，请始终检查是否是响应中的数据，然后执行您的操作。

---

由于您使用的是 React，我建议您使用 React 功能来发挥您的优势。例如使用 React Hooks，检查这种方法：

function SomeComponent ()
{
  const [token, setToken] = useState("");

  // do something when token value was changed 
  useEffect(()=> {
    if(token)
      performSwitchOperations(token); // pass your state variable token
  },[token])
  
  // Function to be executed when token is retrieved
  const performSwitchOperations =(token) =>
  {
    switch (type) {
      case 'get':
        console.log(token);
        Axios.get(baseUrl + url, {
          headers: {
            Authorization: `Bearer ${token}`,
            extraHeaders,
          },
        })
          .then(res => {
            console.log(res);
            return res;
          })
          .catch(err => {
            console.log(err);
            return err;
          });
        break;
    }
  }
  
  const performAjaxRequest = () =>
  {
    return store.get('userTokens').then(res => 
    {
      console.log(res.idToken.jwtToken);
      setToken(res.idToken.jwtToken);
    });
  }
}