Javascript/React：如何检测`await`调用并相应地设置状态？

Question

我有一个函数foo，它可能会或可能不会调用多个异步请求以缓存令牌：

async foo() {
    let token = this._token;

    if(!token) {
        token = await this.getTokenFromStorage();
    }        

    if(Tokens.isExpired(this._token) {
        this._token = await Tokens.refresh(this._token);
    } else {
        this._token = token;
    }

    return this._token;
}

现在，我希望调用 foo 的 React 组件具有如下逻辑：

1. 调用 foo()
2. 如果 foo 有缓存令牌，setState{isLoading: false}
3. 否则，setState{ isLoading: true }，并等待异步操作完成。异步操作完成后调用setState{ isLoading: false }并返回新缓存的令牌...

不过，对于如何执行此操作非常迷茫……感谢您的帮助。

Answer 1

我不完全确定您是如何构建应用程序的，但也许以下内容为您提供了一些线索，说明如何实现与您的 async foo() 方法相关的 loading 状态更改：

  class YourReactComponent extends React.Component {

    constructor(props) {       
      // Set the initial default state of your component. 
      // token added as an optional extra for the purpose of this example
      this.state = {
        loading : false,
        token : ''
      }
    }

    async getTokenFromStorage() {
      // ... your implementation
    }

    // Modifed version of your foo method
    async foo(token) {

        // Condition to determine if loading state should be updated
        // We will use this to avoid redundant setState calls
        const shouldLoad = !token || Tokens.isExpired(token);

        // Check to see if we need to update loading state
        if(shouldLoad) {
          this.setState({ loading : true })
        }

        if(!token) {
          token = await this.getTokenFromStorage();
        }        
        else if(Tokens.isExpired(token)) {
          token = await Tokens.refresh(token);
        }

        // If loading state was previously updated, reset it
        if(shouldLoad) {
          this.setState({ loading : false })
        }

        return token;
    }

    // A render method I have created to demonstrate the concepts at hand
    render() {

      const { loading, token } = this.state

      return (<div>
          <button onClick={ async () => console.log(`Got this token: ${ this.foo(token) }`) }>load token</button>
          <p>{ loading ? 'Loading' : 'Ready' }</p>
        </div>)
    }
  }

要记住的关键概念是：

• setState(..) 方法可在 React.Component 实例中使用
• 调用setState(..) 用于更新组件的内部状态
• 调用setState(..) 也会导致组件（以及受影响的子组件）的重新渲染。

有关.setState() 方法的更多信息，请参阅the documentation