Возможно, вы подслушали обещания, и многие люди говорят об этом, используя это, но вы не знаете, почему они такие особенные. Разве вы не можете использовать обратные вызовы? Что особенное? В этой статье давайте посмотрим, что такое обещания и как использовать их, чтобы написать более элегантный код JavaScript.
Обещает легко читать
Например, мы хотим получить некоторые данные из API Hipsterjesus и добавить эти данные на нашу страницу. Данные ответа этих API следующие:
{"text": "<p> lorem ipsum ... </p>", "params": {"paras": 4, "type": "Hipster-latin"}}}}}Чтобы использовать обратные вызовы, мы обычно пишем что -то вроде следующего:
$ .getJson ('http://hipsterjesus.com/api/', function (data) {$ ('body'). Append (data.text);});Если у вас есть опыт использования jQuery, вы узнаете, что мы создали запрос GET и хотите, чтобы ответ был JSON. Мы также передаем функцию обратного вызова, чтобы принять JSON ответа, чтобы добавить данные в документ.
Другим способом написать является использование объекта обещания, возвращаемого методом Getjson. Вы можете связать обратный вызов непосредственно с этим объектом возврата.
var promise = $ .getJson ('http://hipsterjesus.com/api/'); respert.done (function (data) {$ ('body'). Append (data.text);});В приведенном выше примере обратного вызова, он добавляет результат запроса API в документ, когда ответ успешно. Но что происходит, когда ответ терпит неудачу? Мы можем связать неудачный процессор в нашем обещании.
var promise = $ .getJson ('http://hipsterjesus.com/api/'); respers.done (function (data) {$ ('body'). Append (data.text);}); обещание.fail (function () {$ ('body').Большинство людей удаляют переменную обещания, которая является более краткой и видит функцию кода с первого взгляда.
$ .getJson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). Append (data.text);}). Fail (function () {$ ('body'). Append ('<p> нет, что -то пошло не так! </p>');});JQuery также содержит обработчик событий, который происходит постоянно и будет называться независимо от успеха или неудачи запроса.
$ .getJson ('http://hipsterjesus.com/api/') .done (function (data) {$ ('body'). Append (data.text);}). Fail (function () {$ ('Body'). Append ('<p> нет, что -то пошло не так! </p>');). Это всегда будет добавлено!. </p> ');Используя обещания, порядок обратных вызовов, как и ожидалось. Мы можем убедиться, что нормальный обратный вызов называется сначала, затем неудачный обратный вызов, и, наконец, обратный вызов, который продолжает происходить.
Лучший API
Например, мы хотим создать инкапсулированный объект API Hipsterjesus. Мы добавим метод - HTML, который возвращает данные HTML из API. В отличие от настройки процессора обратного вызова для разбора запросов, мы можем заставить метод вернуть объект обещания.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }};Это круто, поэтому мы можем обойти объект обещания, не беспокоясь о том, когда или как проанализировать его ценность. Любой код, который требует ответного возврата, может быть зарегистрирован с помощью успешного обратного вызова ответа.
Затем метод позволяет нам изменить результат обещания и передать его следующему процессору в цепочке. Это означает, что теперь мы можем использовать новый API, как это:
hipsterjesus.html (). Dode (function (html) {$ ("body"). Append (html);});До недавнего времени у AngularJS есть особенность убийцы, где шаблоны могут быть непосредственно связаны с обещаниями. В контроллере Angular, как это:
$ scope.hipsteripsum = $ http.get ('http://hipsterjesus.com/api/');Таким образом, очень легко написать {{hipsteripsum.text}} в шаблоне. Когда обещание разрешается, Angular не нужно автоматически обновлять представление. К сожалению, угловая команда отказалась от этой функции. Теперь он может быть включен, позвонив по телефону $ parseprovider.unwrapromises (true). Я надеюсь, что Angular уже включает в себя эту функцию в другие рамки (я буду следить за ней).
Цепный звонок
Лучшая часть обещания - это то, что вы можете связать их вместе. Например, мы хотим добавить метод в API, который возвращает массив.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, параграф: function () {return this.html (). then (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }};Мы используем этот метод HTML в приведенном выше методе, мы используем его в методе параграфов. Поскольку возвращаемое значение функции обратного вызова обещания передается следующему обратному обращению в цепочке, мы можем свободно создавать небольшие, функциональные методы для изменения данных при их прохождении.
Мы можем подключить обещания в любое время по мере необходимости. Давайте добавим один.
var hipsterjesus = {html: function () {return $ .getjson ('http://hipsterjesus.com/api/') .then (function (data) {return data.text;}); }, параграф: function () {return this.html (). then (function (html) {return html.replace (/<[^>]+>/g, "") .split ("");}); }, предложения: function () {return this.paragraphs (). Тогда (function (параграф) {return [] .concat.apply ([], paracraphs.map (function (paragraph) {return paragraph.split ( /. /);}));}); }};Несколько вызовов
Возможно, самой выдающейся особенностью обещания является способность назвать несколько API. Что произойдет, если вам нужно создать два вызова API одновременно при использовании обратного вызова? Вы можете написать это:
var FirstData = null; var secondData = null; var responsecallback = function () {if (! FirstData ||! SecondData) return; // сделать что -нибудь} $. get ("http://example.com/first", function (data) {firstdata = data; outsecallback ();}); $ .get ("http://example.com/second", function (data) {secondData = data; outcallback ();});Это намного проще использовать обещание:
var firstpromise = $ .get ("http://example.com/first"); var SecondPromise = $ .get ("http://example.com/second"); $.Здесь мы используем метод, чтобы связать его с процессором, который называется, когда оба запроса завершены.
в заключение
Это обещание. Я надеюсь, что вы сразу подумаете о некоторых ужасных вещах, которые могут быть достигнуты с обещанием. Что вам больше всего нравится в их использовании? Расскажи мне в комментариях!
*Примечание. Для простоты в этой статье используется задержка выполнения jQuery. Существуют тонкие различия между отложенным объектом jQuery и спецификацией обещаний/A+, что является более стандартным.
Приведенная выше статья Как использовать обещания для написания более элегантного кода JavaScript, - это все контент, которым я делюсь с вами. Я надеюсь, что это может дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.