Блог

В моем проекте у меня есть следующий магазин mobx:

 class AvailabilityCallendar {
  @observable selected_date = new Date();
  @observable max_persons = 2;
  @observable loading = false;

  @computed get availableDates() {
    $.ajax({
      url:
        createUrl('/calendar/availability')  
        'persons='  
        this.max_persons  
        'amp;'  
        selected_date.format('yy-m-d'),
      type: 'GET',
      beforeSend: function () {
        this.loading = true;
      },
      success: function (data) {
        // return value here
      },
      fail: function (jqXHR, textStatus, errorThrown) {
        this.loading = false;
        console.error('Error: '   errorThrown   ', Status: '   textStatus);
      },
    });
  }
}

 

Но в этом случае я знаю, как я могу вернуть значение из успешного обратного вызова ajax.
Ты знаешь, как это сделать?

Вы можете вернуться Promise сюда, но я не буду рекомендовать это, потому что вы нарушаете правила вычисляемых значений.

Вычисленные значения не должны иметь побочных эффектов и не должны обновлять другие наблюдаемые значения.

computed значения mobx-это «представление» над другим наблюдаемым элементом. Это должна быть операция синхронизации, поэтому ваша реализация неверна.

Что вам нужно, так это простой observable и асинхронный метод, который обновит его значение.

 // pseudo code

class AvailabilityCallendar {
  @observable selected_date = new Date();
  @observable max_persons = 2;
  @observable loading = false;
  @observable availableDate = null; // initial value, it may be any valid js value.

  async getAvailableDate() {
    $.ajax({
      url:
        createUrl('/calendar/availability')  
        'persons='  
        this.max_persons  
        'amp;'  
        selected_date.format('yy-m-d'),
      type: 'GET',
      beforeSend: function () {
        this.loading = true;
      },
      success: function (data) {
        this.availableDate = data // this assignment will trigger all the observers of the observable field.
      },
      fail: function (jqXHR, textStatus, errorThrown) {
        this.loading = false;
        console.error('Error: '   errorThrown   ', Status: '   textStatus);
      },
    });
  }
}
 

Тогда позвони getAvailableDate()