在react组件内等待来自非react源的请求

在React组件内等待来自非React源的请求，可以通过以下步骤实现：

首先，在React组件中定义一个状态变量来表示请求的状态，例如isLoading。初始时将isLoading设置为true，表示正在等待请求的响应。
在组件的生命周期方法中，例如componentDidMount，可以发起非React源的请求。可以使用原生的JavaScript方法，例如fetch或者XMLHttpRequest，或者使用第三方库，例如axios。
在请求发起之后，可以通过设置回调函数来处理请求的响应。在回调函数中，可以根据请求的结果来更新组件的状态。如果请求成功，将isLoading设置为false，并将请求的数据保存到组件的状态中。如果请求失败，可以根据具体情况进行错误处理，例如显示错误信息。
在组件的render方法中，根据isLoading的值来决定显示不同的内容。如果isLoading为true，表示正在等待请求的响应，可以显示一个加载中的提示。如果isLoading为false，表示请求已经完成，可以根据请求的结果来显示相应的内容。

以下是一个示例代码：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      data: null,
      error: null
    };
  }

  componentDidMount() {
    // 发起非React源的请求
    fetch('https://example.com/api/data')
      .then(response => response.json())
      .then(data => {
        // 请求成功，更新组件状态
        this.setState({
          isLoading: false,
          data: data,
          error: null
        });
      })
      .catch(error => {
        // 请求失败，更新组件状态
        this.setState({
          isLoading: false,
          data: null,
          error: error.message
        });
      });
  }

  render() {
    const { isLoading, data, error } = this.state;

    if (isLoading) {
      return <div>Loading...</div>;
    }

    if (error) {
      return <div>Error: {error}</div>;
    }

    return (
      <div>
        {/* 根据请求的结果显示内容 */}
        <p>Data: {data}</p>
      </div>
    );
  }
}

export default MyComponent;

在上述示例中，使用fetch方法发起了一个GET请求，并在请求成功或失败时更新组件的状态。根据isLoading的值来决定显示加载中的提示或者请求的结果。请注意，示例中的请求地址仅作为示意，实际应根据具体情况进行修改。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求灵活调整配置，支持多种操作系统，适用于各种应用场景。了解更多信息，请访问腾讯云云服务器产品介绍。
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，可用于存储和处理各种类型的数据，适用于大规模数据存储和分发场景。了解更多信息，请访问腾讯云对象存储产品介绍。

请注意，以上推荐的腾讯云产品仅作为示例，实际应根据具体需求选择适合的产品。