javascript函数先执行，并继续之前的返回值，

Question

我写一个应用程序做出反应，我首先要确保我的两个JWT令牌是继续之前的应用程序（componentDidMount生命周期挂钩）设置。我用一个回调做出一定的第二功能等待着第一个函数。但由于某些原因的价值是不是在我的localStorage呢。我不能使用终极版的这一点，因为，我取前两个电话是用户的图像。

所有提示/建议是值得欢迎的。谢谢。

app.js

  componentWillMount() {


  function firstFunction(_callback){
      acquireToken();
      acquireGraphToken();
      _callback();    
  }

    function secondFunction(){
      firstFunction(function() {
          console.log('huzzah, I\'m done!');
      });  
    }

      secondFunction();
  }

ADAL.JS（它处理我的令牌的请求。）

import { AuthenticationContext, adalFetch } from 'react-adal';

const adalConfig = {
    instance: 'https://login.microsoftonline.com/',
    clientId: '*******',
    extraQueryParameter: 'nux=1',
    endpoints: {
        graphApi: 'https://graph.microsoft.com',
        oneApi: 'https://one365demo.onmicrosoft.com/b153b2*********-3f1d0cf658f5'
    },
    postLogoutRedirectUri: window.location.origin,
    redirectUri: window.location.origin,
    cacheLocation: 'localStorage'
};

export const authContext = new AuthenticationContext(adalConfig);



export const adalGraphFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.graphApi, fetch, url, options);

export const adalOneApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.oneApi, fetch, url, options);





export const getToken = () => {
    return authContext.getCachedToken(authContext.config.clientId);
};

export const getGraphToken = () => {
    return authContext.getCachedToken('https://graph.microsoft.com');
};




export const acquireGraphToken = () => {  
    authContext.acquireToken(adalConfig.endpoints.graphApi, (message, token, msg) => {
        console.log('graph token', token);
        return token;
    })

    return null;
} 

export const acquireToken = () => {  
    authContext.acquireToken(adalConfig.endpoints.oneApi, (message, token, msg) => {
        console.log('the token', token);
        return token;
    })

    return null;
}

Answer 1

该render()方法在很早的时刻评估一次，componentWillMount()之前。然后将其重新评估（原则上）的每个所述部件状态经由setState方法改变时。

我最常做的是在组件的状态，以纪念在完成初始化时，检查此标志在render()方法。在您的例子：

componentWillMount() {
  function firstFunction(_callback){
      acquireToken();
      acquireGraphToken();
      _callback();    
  }

  function secondFunction(){
    firstFunction(function() {
        console.log('huzzah, I\'m done!');
        this.setState({dataIsReady: true})
    });  
  }

  secondFunction();
}


render() {
  if (this.state.dataIsReady) {
    // render the actual app
  } else {
    // render some "Loading ..." message
  }
}

希望它可以帮助 - 卡洛斯

Answer 2

你应该在该州创造价值来跟踪你的初步功能完成。只是改变了值，然后有部分负荷为正常。

EG

class App extends React.Component {
  state = { shouldLoad: false }

  firstFunction() {
    //Execute your functions here then...

    //Set state when complete...
    this.setState({ shouldLoad: true });
  }

  render() {
    const {shouldLoad} = this.state;

    return (
      <div>
        {shouldLoad === true && (
          <p>Load your content here</p>
        )}
      </div>
    );
  }
}