MobX中处理异步数据的加载状态

在 MobX 中，可以通过添加额外的可观察属性来处理异步数据的加载状态。以下是一个示例：

javascript格式：

import { observable, action } from'mobx';

class MyStore {

  @observable data = null;

  @observable isLoading = false;

 

  @action

  async fetchData() {

    this.isLoading = true;

    try {

      const response = await fetch('https://example.com/api/data');

      const json = await response.json();

      this.data = json;

    } catch (error) {

      console.error('Error fetching data:', error);

    } finally {

      this.isLoading = false;

    }

  }

}

export default new MyStore();

在上述示例中，添加了  isLoading  这个可观察属性来表示数据是否正在加载。在  fetchData  方法中，开始时将  isLoading  设置为  true ，在数据获取完成（无论成功还是失败）时将其设置为  false  。

在 React 组件中，可以根据  isLoading  的值来显示不同的内容，例如加载中的提示或者加载完成后的数据展示。