React中使用axios await获取JSON数据并存储至类变量的实现方案

核心改造要点 #

1. 给请求方法加上async标识：await只能在异步函数里用，所以得把包含Axios请求的方法声明成async函数。
2. 用try/catch处理错误：替代原来.catch()的写法，代码结构更直观。
3. 直接绑定类变量：通过this.xxx把JSON数据挂载到组件实例上，方便后续传给其他组件。

重构后的完整代码 #

// 定义异步请求方法
async fetchUserData() {
  try {
    // 用await等待请求返回结果
    const response = await axios.get(userDataURL);
    
    // 把JSON数据存到类变量（通过this绑定到组件实例）
    this.jsondata = response.data.json;
    console.log("2" + this.jsondata);
    
    // 更新组件状态
    this.setState({ users: response.data.results });
  } catch (error) {
    // 捕获并处理请求异常
    console.error('用户数据请求失败:', error);
  }
}

// 在组件生命周期中调用这个异步方法（比如componentDidMount）
componentDidMount() {
  this.fetchUserData();
}

传递数据给其他组件 #

要把存储的JSON数据传给子组件，直接在渲染时通过props传递就行：

render() {
  return (
    <div>
      {/* 将类变量里的JSON数据通过props传给子组件 */}
      <OtherComponent jsonData={this.jsondata} />
    </div>
  );
}

注意事项 #

• 别把React生命周期方法（比如componentDidMount）直接声明成async，官方不推荐这种写法，应该在生命周期内部调用异步方法。
• 类变量this.jsondata会跟着组件实例存在，只要组件没卸载，就能随时访问或传递。

内容的提问来源于stack exchange，提问作者Prachi