代码之家  ›  专栏  ›  技术社区  ›  Shubham Chopra

如何确保API调用在React中加载另一个页面之前完成

  •  0
  • Shubham Chopra  · 技术社区  · 6 年前

    我在app.js中的react项目中进行api调用。发生的事情是,我在一段时间后从该api获得响应,直到使用此repsonse的其他组件中断,因此我必须确保除非未调用getSubscriptionStatusCallback,否则不要继续。

    getSubscriptionStatus(context) {
        console.log('inside api');
        if (!context.userInfo || context.userInfo.UserIdentified === '0')
          return
    
        let cacheManager = new CacheManager({
          apiName: 'getSubscriptionStatus',
          cacheKey: CacheKeys.SubscriptionStatus(context, ''),
          loader: GetSubscriptionStatusApi.get,
          callback: this.getSubscriptionStatusCallback,
          ttlInSecs: 10
        })
        let params = {
          'OPXUserID': context.userInfo.OPXUserID,
          'ProductType': 'APPSTORE',
          'SiteID': context.siteProperties.SiteID,
        }
        cacheManager.getObject(context, '', params)
      }
    
      getSubscriptionStatusCallback =(json) => {
        let context = this.state.context
        context.subscriptionStatus = json
        this.setState({context: context})
        console.log("testing"+context.subscriptionStatus.StatusCode);
        console.log(this.className, 'getSubscriptionStatusCallback', context)
      }
    
    1 回复  |  直到 6 年前
        1
  •  4
  •   Fabian Hinsenkamp    6 年前

    您应该有条件地呈现需要api中的数据作为道具的组件。

    hasReceivedData ? <Component> : ''
    

    将“hasReceivedData”设为状态,并触发生命周期方法“componentDidMount()”中的api调用,更新回调中的状态。

    hasReceivedData ? <Component> : '<Spinner>'