Простая клиентская структура / шаблон для упрощения выполнения асинхронных вызовов?
-
28-10-2019 - |
Вопрос
В настоящее время мы не используем никаких серьезных клиентских фреймворков, кроме jQuery (и плагинов jQuery.ui + validation + form wizard).
Проблема, которая несколько раз проявляется в нашем коде, заключается в следующем:
- У нас есть кнопка, которая инициирует Ajax-вызов сервера.
- Во время вызова мы отображаем значок «загрузка» с некоторым текстом.
- Если сервер возвращает результат слишком быстро (например, <200 мс), мы «спим» на 200 миллисекунд (с использованием кода
setTimeout()
), для предотвращения мерцания значка ожидания и текста . - После генерации кода метки мы очищаем значок загрузки и текст.
- Затем мы либо отображаем текст ошибки, если в вызове ajax возникла какая-то проблема (сервер возвращает не 500, а пользовательский json со свойством «сообщение об ошибке». На самом деле, иногда у нас есть такой свойство в ответе на поле формы ... и затем мы сопоставляем ошибки с полями формы ... но я отвлекся).
- В случае успеха мы делаем ... кое-что (в зависимости от ситуации).
Я пытаюсь свести к минимуму повторное использование кода и либо пишу, либо повторно использую шаблон / фрагмент кода / фреймворк, который это делает. Хотя я, вероятно, не стану использовать полностью новую платформу для тяжелых условий работы только для этого варианта использования, мне все же хотелось бы знать, какие у меня есть варианты ... возможно, такая клиентская структура будет хороша и для других вещей. Если есть легкий фреймворк, который не требует от меня переворачивания всего кода вверх ногами, и я мог бы использовать его только в определенных случаях, тогда мы могли бы использовать его вместо того, чтобы изобретать колесо.
Я недавно услышал о Ember.js . Подходит ли он для решения этой проблемы? Как бы вы ее решили?
Решение
Другие советы
Просто оберните $ .ajax в свою собственную функцию.таким образом вы можете реализовать свою собственную очередь и т. д. Я бы предложил создать для этого компонент jquery.Он может стать довольно мощным, например, вы также можете передавать заголовки http и т. Д.
Что касается фреймворков, это зависит от ваших требований.
Например, вы можете рассмотреть Kendo UI, в нем есть хорошая среда для создания источников данных:
http://demos.kendoui.com/web/datasource/index.html .
Рабочий пример кода (ну, почти)
Я все равно собирался сделать что-то вроде ответа @ DefyGravity - его идея хороша, но все еще псевдокод / не полностью завершен.Вот мой рабочий код ( почти рабочая демонстрация , вплоть до самого URL-адреса Ajax и настроек пользовательского интерфейса)
Код и пример использования:
родовое слово