По ходу своей работы, часто сталкиваюсь с ajax запросами внутри i-bem блоков. Часто повторяющиеся паттерны решил вынести в отдельную надстройку над jquery.ajax
.
Где можно использовать?
Допустим у вас есть кнопка, которая по клику на себя, добавляет куда то контент, а когда контента нет, удаляет сама себя
_onButtonClick: function () {
Http
.abortable(this)
.get(this.params.url)
.then(function (response) {
BEMDOM.replace(this.domElem, response.getText());
}.bind(this));
}
Eсли вдруг по кнопке нажали два раза, предыдущий запрос отмениться, так же навешаются правильные обработчики, которые, в случае удаления блока, остановят запрос и удалят все ненужные ссылки.
Или по клику на ссылку вам нужно подгрузить текст для модального окна, закешировать его, и при последующих кликах отдавать данные из кеша.
_onButtonClick: function () {
Http
.once(this)
.get(this.params.url)
.then(function (response) {
this.showModal(response.getText());
}.bind(this));
}
запрос на сервер отработает только единожды, последущие вызовы, этой функции, запросы на сервер делать не будут, просто буду возвращать отработанный промис.
Или вам нужно делать много разных запросов в разные места, но нужно чтобы выполнился только последний.
this._req = Http.abortable(this);
this._req.get(this.params.someUrl).then(this._onSomeDone); //этот запрос отменится, т.к следом идет другой
this._req.get(this.params.anotherUrl).then(this._onAnotherDone);
Не нужно плодить дополнительных переменных, самому вызывать abort()
у jqXHR
перед другим запросом.
Или если нужно сделать два разных запроса в разные места
Http.abortable(this, 'some').get(this.params.someUrl).then(this._onSomeDone);
Http.abortable(this, 'another').get(this.params.anotherUrl).then(this._onAnotherDone);
https://github.com/JiLiZART/bem-http
Ставим через bower install bem-http
, и подключаем в уровнях { path: 'libs/bem-http/common.blocks', check: false }
.
Пример как использовать в блоке https://github.com/JiLiZART/bem-http/blob/master/example.blocks/app/app.js
P.S. Если есть какие либо идеи по улучшению API, буду очень благодарен.
У себя в проекте сделал подобную штуку (блок
server
):