乐闻世界logo
搜索文章和话题

How to handle asynchronous operations in MobX?

2月22日 14:05

In MobX, asynchronous operations require special attention because state changes must occur within actions. MobX provides multiple ways to handle asynchronous operations.

Ways to Handle Asynchronous Operations

1. Using runInAction

javascript
import { observable, action, runInAction } from 'mobx';

class UserStore {
  @observable users = [];
  @observable loading = false;
  @observable error = null;
  
  @action
  async fetchUsers() {
    this.loading = true;
    this.error = null;
    
    try {
      const response = await fetch('/api/users');
      const data = await response.json();
      
      runInAction(() => {
        this.users = data;
        this.loading = false;
      });
    } catch (error) {
      runInAction(() => {
        this.error = error.message;
        this.loading = false;
      });
    }
  }
}

2. Using async action

javascript
import { observable, action } from 'mobx';

class UserStore {
  @observable users = [];
  @observable loading = false;
  @observable error = null;
  
  @action.bound
  async fetchUsers() {
    this.loading = true;
    this.error = null;
    
    try {
      const response = await fetch('/api/users');
      const data = await response.json();
      
      this.users = data;
      this.loading = false;
    } catch (error) {
      this.error = error.message;
      this.loading = false;
    }
  }
}

3. Using flow

javascript
import { observable, flow } from 'mobx';

class UserStore {
  @observable users = [];
  @observable loading = false;
  @observable error = null;
  
  fetchUsers = flow(function* () {
    this.loading = true;
    this.error = null;
    
    try {
      const response = yield fetch('/api/users');
      const data = yield response.json();
      
      this.users = data;
      this.loading = false;
    } catch (error) {
      this.error = error.message;
      this.loading = false;
    }
  });
}

Detailed Comparison

runInAction

Pros:

  • High flexibility, can be used anywhere
  • Suitable for handling complex async logic
  • Can precisely control timing of state updates

Cons:

  • Need to manually wrap state update code
  • Code structure may not be clear enough

Use cases:

  • Need to update state at different stages of async operations
  • Complex async logic
  • Need precise control over state update timing
javascript
@action
async complexOperation() {
  this.loading = true;
  
  try {
    const data1 = await this.fetchData1();
    runInAction(() => {
      this.data1 = data1;
    });
    
    const data2 = await this.fetchData2(data1.id);
    runInAction(() => {
      this.data2 = data2;
    });
    
    const result = await this.processData(data1, data2);
    runInAction(() => {
      this.result = result;
      this.loading = false;
    });
  } catch (error) {
    runInAction(() => {
      this.error = error.message;
      this.loading = false;
    });
  }
}

async action

Pros:

  • Clear code structure
  • Automatically handles state updates
  • No need to manually wrap code

Cons:

  • Lower flexibility
  • All state updates in the same action

Use cases:

  • Simple async operations
  • No need for precise control over state update timing
  • Code structure priority scenarios
javascript
@action.bound
async simpleFetch() {
  this.loading = true;
  
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    
    this.data = data;
    this.loading = false;
  } catch (error) {
    this.error = error.message;
    this.loading = false;
  }
}

flow

Pros:

  • Clearest code structure
  • Automatically handles state updates
  • Supports cancellation
  • Better error handling

Cons:

  • Need to learn generator syntax
  • Compatibility issues (requires polyfill)

Use cases:

  • Complex async flows
  • Scenarios requiring cancellation
  • Need better error handling
javascript
fetchUsers = flow(function* () {
  this.loading = true;
  this.error = null;
  
  try {
    const response = yield fetch('/api/users');
    const data = yield response.json();
    
    this.users = data;
    this.loading = false;
  } catch (error) {
    this.error = error.message;
    this.loading = false;
  }
});

// Can cancel flow
const fetchTask = store.fetchUsers();
fetchTask.cancel();

Best Practices

1. Uniformly use async action

javascript
class ApiStore {
  @observable data = null;
  @observable loading = false;
  @observable error = null;
  
  @action.bound
  async fetchData(url) {
    this.loading = true;
    this.error = null;
    
    try {
      const response = await fetch(url);
      const data = await response.json();
      
      this.data = data;
      this.loading = false;
    } catch (error) {
      this.error = error.message;
      this.loading = false;
    }
  }
}

2. Use flow for complex flows

javascript
class OrderStore {
  @observable orders = [];
  @observable loading = false;
  @observable error = null;
  
  createOrder = flow(function* (orderData) {
    this.loading = true;
    this.error = null;
    
    try {
      // Validate order
      const validated = yield this.validateOrder(orderData);
      
      // Create order
      const order = yield this.createOrderApi(validated);
      
      // Pay order
      const paid = yield this.payOrder(order.id);
      
      // Update state
      this.orders.push(paid);
      this.loading = false;
      
      return paid;
    } catch (error) {
      this.error = error.message;
      this.loading = false;
      throw error;
    }
  });
}

3. Use runInAction for step-by-step updates

javascript
class UploadStore {
  @observable progress = 0;
  @observable files = [];
  @observable uploading = false;
  
  @action
  async uploadFiles(files) {
    this.uploading = true;
    this.progress = 0;
    
    try {
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        await this.uploadFile(file);
        
        runInAction(() => {
          this.files.push(file);
          this.progress = ((i + 1) / files.length) * 100;
        });
      }
      
      runInAction(() => {
        this.uploading = false;
      });
    } catch (error) {
      runInAction(() => {
        this.uploading = false;
      });
      throw error;
    }
  }
}

4. Use reaction for automatic loading

javascript
class DataStore {
  @observable userId = null;
  @observable userData = null;
  @observable loading = false;
  
  constructor() {
    reaction(
      () => this.userId,
      (userId) => {
        if (userId) {
          this.loadUserData(userId);
        }
      }
    );
  }
  
  @action.bound
  async loadUserData(userId) {
    this.loading = true;
    
    try {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      
      this.userData = data;
      this.loading = false;
    } catch (error) {
      this.loading = false;
    }
  }
}

5. Error handling and retry

javascript
class Store {
  @observable data = null;
  @observable loading = false;
  @observable error = null;
  @observable retryCount = 0;
  
  @action.bound
  async fetchDataWithRetry(url, maxRetries = 3) {
    this.loading = true;
    this.error = null;
    
    for (let i = 0; i < maxRetries; i++) {
      try {
        const response = await fetch(url);
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        runInAction(() => {
          this.data = data;
          this.loading = false;
          this.retryCount = 0;
        });
        
        return data;
      } catch (error) {
        runInAction(() => {
          this.retryCount = i + 1;
        });
        
        if (i === maxRetries - 1) {
          runInAction(() => {
            this.error = error.message;
            this.loading = false;
          });
          throw error;
        }
        
        // Wait before retry
        await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
      }
    }
  }
}

Common Mistakes

1. Directly modifying state in async functions

javascript
// ❌ Wrong: directly modifying state in async function
@action
async fetchData() {
  this.loading = true;
  
  const response = await fetch('/api/data');
  const data = await response.json();
  
  this.data = data; // Not in action
  this.loading = false;
}

// ✅ Correct: use runInAction or async action
@action
async fetchData() {
  this.loading = true;
  
  const response = await fetch('/api/data');
  const data = await response.json();
  
  runInAction(() => {
    this.data = data;
    this.loading = false;
  });
}

// Or
@action.bound
async fetchData() {
  this.loading = true;
  
  const response = await fetch('/api/data');
  const data = await response.json();
  
  this.data = data;
  this.loading = false;
}

2. Forgetting to handle errors

javascript
// ❌ Wrong: forgetting to handle errors
@action
async fetchData() {
  this.loading = true;
  
  const response = await fetch('/api/data');
  const data = await response.json();
  
  runInAction(() => {
    this.data = data;
    this.loading = false;
  });
}

// ✅ Correct: handle errors
@action
async fetchData() {
  this.loading = true;
  this.error = null;
  
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    
    runInAction(() => {
      this.data = data;
      this.loading = false;
    });
  } catch (error) {
    runInAction(() => {
      this.error = error.message;
      this.loading = false;
    });
  }
}

3. Forgetting to reset loading state

javascript
// ❌ Wrong: forgetting to reset loading state
@action
async fetchData() {
  this.loading = true;
  
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    
    runInAction(() => {
      this.data = data;
    });
  } catch (error) {
    runInAction(() => {
      this.error = error.message;
    });
  }
}

// ✅ Correct: reset loading state in all branches
@action
async fetchData() {
  this.loading = true;
  
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    
    runInAction(() => {
      this.data = data;
      this.loading = false;
    });
  } catch (error) {
    runInAction(() => {
      this.error = error.message;
      this.loading = false;
    });
  }
}

Performance Optimization

1. Use debounce

javascript
import { debounce } from 'lodash';

class SearchStore {
  @observable query = '';
  @observable results = [];
  @observable loading = false;
  
  constructor() {
    this.debouncedSearch = debounce(this.performSearch.bind(this), 300);
  }
  
  @action
  setQuery(query) {
    this.query = query;
    this.debouncedSearch();
  }
  
  @action.bound
  async performSearch() {
    if (this.query.length < 2) {
      this.results = [];
      return;
    }
    
    this.loading = true;
    
    try {
      const response = await fetch(`/api/search?q=${this.query}`);
      const data = await response.json();
      
      this.results = data;
      this.loading = false;
    } catch (error) {
      this.loading = false;
    }
  }
}

2. Use requestAnimationFrame to optimize UI updates

javascript
@action
async loadData() {
  this.loading = true;
  
  const data = await this.fetchData();
  
  // Use requestAnimationFrame to optimize UI updates
  requestAnimationFrame(() => {
    runInAction(() => {
      this.data = data;
      this.loading = false;
    });
  });
}

Summary

  • Use async action for simple async operations
  • Use runInAction for scenarios requiring precise control over state update timing
  • Use flow for complex async flows
  • Always handle errors and reset loading state
  • Use reaction for automatic loading
  • Use debounce to optimize performance
  • Use requestAnimationFrame to optimize UI updates
标签：Mobx
热门标签
更多
Git(114)C语言(23)C++(15)React(34)前端(148)Cypress(27)JavaScript(56)Linux(20)Rust(10)Docker(65)Mongoose(18)TypeScript(27)MySQL(8)Vue(13)Tailwind CSS(29)CSS(19)ElasticSearch(24)网络(12)TypeORM(31)