Ìû ñîçäàëè ñêåëåò íàøåãî ïðèëîæåíèÿ äëÿ ôèëüìîâ. Òåïåðü äàâàéòå îæèâèì åãî ñ ïîìîùüþ CSS: %[https://codepen.io/Spruce_khalifa/pen/wvygzLq?editors=0100] Êàê ïîëó÷èòü ôèëüì ×òîáû ïîëó÷èòü íàø ôèëüì, ìû áóäåì èñïîëüçîâàòü API TVMAZE. Ñîçäàéòå ôàéë main.js è äîáàâüòå ñëåäóþùèé êîä: const get_movie = (value = "Game of thrones") => {   fetch(    `https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`  ).then((response) => create_UI(response.json())); }; Ìû ñîçäàëè ôóíêöèþ get_movie(value = "Game of thrones"), êîòîðàÿ èñïîëüçóåò API fetch â JavaScript. Ìû èñïîëüçóåì åãî äëÿ âûïîëíåíèÿ GET çàïðîñà ê íàøåìó API ôèëüìîâ. API fetch âîçâðàùàåò ïðîìèñ. ×òîáû èñïîëüçîâàòü îòâåò îò API, ìû ïðèêðåïëÿåì îáðàòíûé âûçîâ .then(), â êîòîðûé ïåðåäàåì response.json() â íîâóþ ôóíêöèþ create_UI(). Äàâàéòå ñîçäàäèì ôóíêöèþ create_UI: const create_UI = (data) => { const movie_img = document.querySelector("#img_src"); const movie_icon = document.querySelector("#img_icon"); const movie_title = document.querySelector(".movie_title"); const movie_desc = document.querySelector(".movie_desc"); const movie_link = document.querySelector(".btn"); const movie_date = document.querySelector("#movie_date"); const movie_rating = document.querySelector("#movie_rating"); const movie_runtime = document.querySelector("#movie_runtime"); const movie_status = document.querySelector("#movie_status"); // set the UI  movie_icon.src = data.image.medium;  movie_img.src = data.image.original;  movie_title.textContent = data.name;  movie_desc.innerHTML = data.summary;  movie_link.href = data.officialSite;  movie_date.textContent = data.premiered;  movie_rating.textContent = data.rating.average;  movie_runtime.textContent = data.runtime;  movie_status.textContent = data.status; }; Ýòà ôóíêöèÿ, êàê ñëåäóåò èç íàçâàíèÿ, ïîìîãàåò íàì ñîçäàòü ïîëüçîâàòåëüñêèé èíòåðôåéñ äëÿ íàøåãî ïðèëîæåíèÿ ôèëüìîâ. Íî íàì âñå åùå íóæåí ñïîñîá ïîëó÷èòü èìÿ ôèëüìà îò ïîëüçîâàòåëåé, òàê ÷òî äàâàéòå ýòî èñïðàâèì. Ïåðâîå, ÷òî íàì íóæíî ñäåëàòü, ýòî äîáàâèòü îáðàáîò÷èê ñîáûòèÿ onsubmit â íàøó HTML-ôîðìó:

  //

Òåïåðü â íàøåì ôàéëå main.js ìû ìîæåì îáðàáîòàòü òî, ÷òî ïðîèñõîäèò ïðè îòïðàâêå ôîðìû: // handle form submit const search = (event) => {  event.preventDefault(); const value = document.querySelector(".header_form-input").value; get_movie(value); }; Êàæäûé ðàç, êîãäà ïîëüçîâàòåëü îòïðàâëÿåò ôîðìó, ìû ïîëó÷àåì çíà÷åíèå, êîòîðîå îíè ââåëè â ïîëå ïîèñêà, è ïåðåäàåì åãî â ôóíêöèþ get_movie(value = "Game of thrones"), êîòîðóþ ìû ñîçäàëè ðàíåå. Öåïî÷êà ïðîìèñîâ  îòëè÷èå îò òîãî, ÷òî ìû âèäåëè â ïðåäûäóùèõ ïðèìåðàõ, îáðàòíûé âûçîâ .then() íå ÿâëÿåòñÿ êîíöîì. Äåëî â òîì, ÷òî êîãäà âû âîçâðàùàåòå çíà÷åíèå ïðîìèñà, âû ïîëó÷àåòå äðóãîé ïðîìèñ. Ýòî ñòàíîâèòñÿ î÷åíü ïîëåçíûì, êîãäà âû õîòèòå âûïîëíèòü ñåðèþ àñèíõðîííûõ îïåðàöèé ïî ïîðÿäêó. Íàïðèìåð, íàøå API ôèëüìîâ íå òîëüêî âîçâðàùàåò èíôîðìàöèþ î ôèëüìå, íî è èíôîðìàöèþ îáî âñåõ ýïèçîäàõ. Äîïóñòèì, ÷òî ìû äåéñòâèòåëüíî íå õîòèì îòîáðàæàòü âñå ýïèçîäû "Èãðû ïðåñòîëîâ", íàì íóæíû òîëüêî ïåðâûå ÷åòûðå (4) ýïèçîäà. Ñ ïîìîùüþ öåïî÷êè ïðîìèñîâ ìû ìîæåì ëåãêî ýòîãî äîñòè÷ü: const get_movie = (value = "Game of thrones") => {  fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)    .then((response) => response.json())    .then((data) => {      if (data._embedded.episodes.length > 0) {        const new_data = data._embedded.episodes.slice(0, 4);        create_UI(data);        return create_episodesUI(new_data);      } else {        return create_UI(data);      }    }); }; Ýòî âñå òà æå ôóíêöèÿ get_movie(), íî íà ýòîò ðàç, âìåñòî òîãî ÷òîáû ïåðåäàâàòü äàííûå â ôóíêöèþ create_UI, ìû âîçâðàùàåì îòâåò .then((response) => response.json()). Ýòî ñîçäàåò íîâûé ïðîìèñ, ê êîòîðîìó ìû ìîæåì ïðèêðåïèòü äîïîëíèòåëüíûå îáðàòíûå âûçîâû.  èäåàëå ýòà öåïî÷êà ìîæåò ïðîäîëæàòüñÿ áåñêîíå÷íî. Ïîìíèòå, ÷òî âñå, ÷òî âàì íóæíî ñäåëàòü, ýòî âåðíóòü çíà÷åíèå ïðîìèñà. Êàê îáðàáàòûâàòü îøèáêè â ïðîìèñàõ Îøèáêè, êîòîðûå ïðîèñõîäÿò â ïðîìèñå, íåìåäëåííî ïîïàäàþò â îáðàòíûé âûçîâ .catch(): fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)    .then((response) => response.json())    .then((data) => {      // any error here will trigger the .catch() callback    }).catch((error) => {    // all errors are caught and handled here    }) Îáðàòíûé âûçîâ .catch() ÿâëÿåòñÿ ñîêðàùåíèåì äëÿ .then(null, (error) => {}). Âû òàêæå ìîæåòå íàïèñàòü ýòî òàê: fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)    .then((response) => response.json())    .then((data) => {      // any error here will trigger the .catch() callback    }, (error) => {    // all errors are caught and handled here    })  íàøåì ïðèëîæåíèè äëÿ ïîèñêà ôèëüìîâ, íàïðèìåð, êîãäà ìû ñòàëêèâàåìñÿ ñ îøèáêàìè, ìû ìîæåì îáðàáîòàòü è îòîáðàçèòü ïîëüçîâàòåëÿì ïðèÿòíîå ñîîáùåíèå îá îøèáêå â îáðàòíîì âûçîâå .catch(): const get_movie = (value = "Game of thrones") => { fetch(`https://api.tvmaze.com/singlesearch/shows?q=${value}&embed=episodes`)    .then((response) => response.json())    .then((data) => {      if (data._embedded.episodes.length > 0) {        const new_data = data._embedded.episodes.slice(0, 4);        create_UI(data);        return create_episodesUI(new_data);      } else {        return create_UI(data);      }    })    .catch((error) => {      console.log(error.message);      // Challange: display your error here    }); }; Òåïåðü, åñëè ïî êàêîé-òî ïðè÷èíå ìû ïîëó÷àåì îøèáêó, îáðàòíûé âûçîâ .catch() áóäåò âûçâàí, è ìû îòîáðàçèì êîððåêòíóþ îøèáêó ïîëüçîâàòåëþ. Êàê ñîçäàòü ïðîìèñû â JavaScript Òåïåðü, êîãäà ìû óçíàëè, ÷òî òàêîå ïðîìèñû è êàê èõ èñïîëüçîâàòü, äàâàéòå ïîñìîòðèì, êàê ìû ìîæåì ñîçäàòü ïðîìèñ â JavaScript. ×òîáû ñîçäàòü ïðîìèñ â JavaScript, èñïîëüçóéòå êîíñòðóêòîð ïðîìèñà. Êîíñòðóêòîð ïðèíèìàåò îäèí àðãóìåíò: ôóíêöèþ ñ äâóìÿ ïàðàìåòðàìè, resolve è reject: const is_true = true const new_promise = new Promise((resolve,reject) => {  if(is_true) {    // everything went fine    resolve()  } else {    // Oops there was an error    reject()  } }) Çàòåì ìû ìîæåì èñïîëüçîâàòü íàø new_promise, ïðèêðåïëÿÿ ê íåìó îáðàòíûå âûçîâû: new_promise .then((response) => {    // everything went fine }) .catch((error) => {    // handle errors }); Ïîäâåäåì èòîãè  ýòîì ðóêîâîäñòâå ìû óçíàëè î ïðîìèñàõ, ÷òî ýòî òàêîå è êàê èõ èñïîëüçîâàòü, ñîçäàâàÿ ïðèëîæåíèå äëÿ ïîèñêà. Ñ÷àñòëèâîãî êîäèíãà!