Kendo DataSource читает из метода Async / await, который использует Axios для извлечения данных - PullRequest
Новая
       25

Kendo DataSource читает из метода Async / await, который использует Axios для извлечения данных

0 голосов
/ 09 сентября 2018

Использование Реагирование с TypeScript

Может, кто-нибудь предоставит пример того, как я могу использовать источник данных Kendo для чтения из метода, который внутренне использует Axios для создания внешнего API для данных JSON ..? Должно быть, я пробежал 20 разных версий этого кода, пробуя разные подходы, похоже, ничего не подходит ...

Все, что я сейчас пытаюсь сделать, - это снабдить Kendo ComboBox массивом {id: номер, имя: строка}

Очень простой материал на данный момент, но мне придется использовать подобный подход к этому позже с Kendo Grid, который обрабатывает сортировку и разбиение на страницы на стороне сервера, поэтому я бы хотел, чтобы это работало сейчас, тогда это должно быть несколько проще позже ...

Причина, по которой я хочу использовать Axios, заключается в том, что я написал файл api.ts, который добавляет соответствующие заголовки к получению, публикациям и т. Д., А также прекрасно обрабатывает ошибки (например, когда аутентификация отклоняется и т. Д ...)

Базовый пример того, что я пытаюсь, но который не работает, таков: - 

public dataSource: any;

constructor(props: {}) {
super(props);

this.dataSource = new kendo.data.DataSource({
  type: "odata",
  transport: {
    read: function() {
      return [{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }];
    }.bind(this)
  },
  schema: {
    model: {
      fields: {
        id: { type: "number" },
        name: { type: "string" }
      }
    }
  }
});
}

<ComboBox
   name="test"
   dataSource={this.dataSource}
   placeholder={this.placeholder}
   dataValueField="id"
   dataTextField="name"
/>

У кого-нибудь есть мысли по этому поводу? :)

1 Ответ

0 голосов
/ 09 сентября 2018

Легко исправить в конце ... 

this.dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options: any) {
      options.success([{ id: 1, name: "Blah" }, { id: 2, name: "Thing" }]);
    }.bind(this)
  },
  schema: {
    model: {
      fields: {
        id: { type: "number" },
        name: { type: "string" }
      }
    }
  }
});

2 вещи были неправильными ..

Удален тип : "odata", а также Добавлено использование опций в

Теперь все работает нормально с функцией асинхронного ожидания, просто передавая данные в options.success в .then на обещаю . Работа сделана: -)

...