title: How to make the second request wait for the previous one and use its data?
body: <p>There are 2 react components, both send requests to the server (with componentDidMount) Each request looks to see if the token is too old, if yes, it updates it with the refreshToken.</p>
  
  <p>Problem - the first request will update the token successfully, will return a new token and a new refreshToken. The second request will be sent to the server with the old refreshToken and the server will generate an error.</p>
  
  <p>The solution is to declare a global variable (window.pending). If it is false - we do not update the token, if the token is updated - assign it a promise, wait for its completion and apply the resulting token.</p>
  
  <pre><code>// From component 1
  
  loadClient = async () =&gt; {
    const token = await this.props.getToken();
    // other code
  };
  
  // From component 2
  
  loadProject = async () =&gt; {
    const token = await this.props.getToken();
    // other code
  };
  
  // НОС
  
  const tokenProviderHOC = WrappedComponent =&gt;
    class extends PureComponent&lt;Props&gt; {
      request = null;
  
      componentWillUnmount() {
        if (this.request !== null) this.request.abort(); //Cancel server request
      }
  
      checkToken = userId =&gt; async () =&gt; {
        const { history } = this.props;
  
        // token, refreshToken, expiresIn from localStorage
        const token = methods.getToken("token");
        const refreshToken = methods.getRefreshToken("refreshToken");
        const expiresIn = methods.getExpiresIn("expiresIn");
  
        if (Date.now() &gt;= expiresIn) {
          if (window.pending === false) {
            console.log("we are first");
  
            let res;
  
            this.request = this._updateToken({ refreshToken, userId });
  
            window.pending = new Promise(async resolve =&gt; {
              console.log("request start");
  
              res = await this.request.ready(); //ready - start server request
              window.pending = false;
  
              console.log("request end", res ? res.token : false);
              return res ? resolve(res.token) : resolve(false);
            });
          }
          console.log("Token is already looking");
          return window.pending;
        }
        return token;
      };
  
      render() {
        const { userId, history, ...props } = this.props;
  
        return &lt;WrappedComponent {...props} getToken={this.checkToken(userId)} /&gt;;
      }
    };
  
  const mapStateToProps = state =&gt; ({
    userId: userSelectors.getUserInfo(state)?.id || null,
  });
  
  export const tokenProvider = compose(
    withRouter,
    connect(mapStateToProps),
    tokenProviderHOC,
  );
  </code></pre>
  
  <p><strong><em>Must be displayed in the console:</em></strong></p>
  
  <ul>
  <li>'we are first'</li>
  <li>'request start' or 'Token is already looking'</li>
  <li>'request end'</li>
  </ul>
  
  <p><strong><em>Now the console displays:</em></strong></p>
  
  <ul>
  <li>'we are first'</li>
  <li>'request start'</li>
  <li>'Token is already looking'</li>
  <li>'request end'</li>
  <li>'we are first'</li>
  <li>'request start'</li>
  <li>'Token is already looking'</li>
  <li>tokenProvider.js:121 PUT <a href="http://site.loc/user/1/send" rel="nofollow noreferrer">http://site.loc/user/1/send</a> net::ERR_ABORTED 400 (Bad Request)<br>
  // because the token is another</li>
  <li>request end false'</li>
  </ul>
  
  <p>It seems that the second request is waiting for the first one, and then again trying to find out the token from the server passing it the old refreshToken. How to solve a problem?</p>