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

Использование Реагировать с Машинопись

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

Все, что я сейчас пытаюсь сделать, это предоставить Kendo ComboBox массив из {id: number, name: string}

На данный момент это очень простые вещи, но мне придется использовать аналогичный подход к этому позже с 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"
/>

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

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

Icepickle 09.09.2018 19:41

@Icepickle Вы предлагаете URL: часть транспорта? Разве для этого не нужен реальный URL, поэтому в основном в обход Axios ..? Если это так, то нет, потому что мне пришлось бы индивидуально обрабатывать заголовки для аутентификации и ошибок для каждого использования источника данных, тогда ..?

API 09.09.2018 21:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
1 370
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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 вещи были неправильными ..

Удален тип: "одата", а также Добавлено использование параметры в

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

Другие вопросы по теме