在 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 的值来显示不同的内容,例如加载中的提示或者加载完成后的数据展示。