Мужик, делай то что ты делаешь. Я чуть с ума не сошел пока искал эту инфу в понятном и доступном виде в сети. Пришлось самому всё понимать кое-как, и то не всё. И тут, хвала алгоритмам ютуба, появился ты. еще раз спасибо + лайк + подпискам (:
Хочу отметить разницу между Fetch и XHR: при отправке файлов/больших payload'ов на сервер XHR - позволяет получать прогресс загрузки файла на сервер, в то время как Fetch этой информации не предоставляет
Юзал свой jQuery, до фетча все никак не добирался, и наконец у тебя вышел такой видосик, хоть уже что-то и есть про фетч, но тут более понятней и подробней. Пасеба , сэр!
Реально, практически идеальный урок! Единственное из-за чего картина не совсем до конца складывается, так это из-за того, что были опущены async/await, а также очень хотелось бы увидеть наглядный пример serialize у ajax, но используя fetch
По-моему еще ЛУЧШЕ все это рассказать просто не возможно. Большое спасибо за видео! Мне кажется, если вы сейчас начнете выкладывать обучающие видео о том, как правильно строить дома - я подамся в строители, потому что ваши видео смотреть - одно удовольствие ! :D :)))
Владилен, запиши видос про графику на canvas, никогда этим не пользовался и не сталкивался, но очень было бы увидеть и послушать профессионала на эту тему. Ты же вроде разбирался с этим как раз, когда в конкурсе Telegram участвовал, вот было бы очень интересно послушать как ты все писал и как работать с графикой
Когда приходит ответ, не важно с кодом ошибки или нет, это считается нормальным ответом http и срабатывает событие onload. Чтобы получить событие onerror можете попробовать отключить интернет и запустить скрипт, получите ошибку типа "net::ERR_INTERNET_DISCONNECTED" как раз из события onerror.
С этим сайтом json placeholder понятно, а как быть с локальным своим сайтом? Там что должно быть, в самом простом варианте, файл index.php и в нем что должно быть? Чтобы мы могли получить данные. И еще, т. к. тут упоминается ajax, то что тут рассматривается, мы получаем данные с сервера, я например хочу сделать, чтобы эти полученные данные отображались на странице сайта, то они будут добавляться Без перезагрузки страницы?
круто, действительно очень познавательно, как только появятся деньги отблагодарю, курс куплю или задоначу, очень понятно, а главное отвечает на все вопросы которые мучали раннеее
зачетный ролик! работать с XHR классом как по мне проще для понимания чем с fetch(). классе все явно указывается а в fetch неявные промисы и прочие методы, мне нубу без доков не разобраться.
Теперь хоть разобрался зачем был нужен XMLHttpRequest. Спасибо. Хотелось бы разобрать как правильно проектировать бекенд + фронт. А то столько мнений не знаешь кто прав.
Владилен, спасибо тебе за твои видео. Очень помогают! Нет ли у тебя в планах записать мастер класс по DevTools бразуера? У тебя очень много уроков в которых ты объясняешь, как что-то сделать с нуля, с этим все более-менее понятно. Мог бы ты записать какой-нибудь курс, в котором ты бы взял какой-нибудь open-source проект, и показал от и до, как разобраться в новом проекте, с чего начать, как правильно читать код, как структурировать полученную информацию и приступить к допиливанию своего функционала. (Лично меня интересуют проекты на Angular и чистом JS).
Как получить отправленные данные с клиента методом POST на сервере? Пробовал реализовать как у вас fetch, но он возвращал мне мою html страницу на сервере. Хотя на самом клиенте данные отправляются и если смотреть в браузере, они находятся в Network в разделе Headers/Request Payload. Как мне достать оттуда мои данные на локальном сервере?
Подскажи, пожалуйста, как так сделать, в названия методов внутри () скобок писались, как у тебя допустим sendRequest ( method: "POST") - как сделать так чтоб "method" показывался? это расширение какое-то ??
в уроке, видимо, ошибка. Если в готовом коде закомментить метод POST и раскомментить GET, то -- Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body . Получается, что в функции sendRequets для GET не может быть body в качестве аргумента, и в промисе тоже. Даже если если он равен нуллу
не-не.... если боди равен нуллу - всё норм, а так - да, ошибочка в коде есть... Просто body надо стрингифаить отдельно и ставить проверку на метод... типа if(method==='POST'){body=JSON.stringify(body)}, а в инициализации вместо body : JSON.stringify(body) поставить body : body, так как по умолчанию body = null , то и всё норм работает
пару заметок, если кто-то захочет постестироват запросы через свой PHP-сервер (маловероянтно, конечно, что найдутся такие же недалекие люди, как я, но все же ...): я кучу времени потратил, чтобы угадать, как там должно быть сделано, чтобы все работало .... итак, в вашем PHP файле: # заголовки, чтобы сервер вообще смог хоть что-то ответить на запрос header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); # чтобы все работало после указания xhr.setRequestHeader('Content-Type', 'application/json'); # распарсивалка данных, передаваемых не строкой, а в виде JSON.stringify({...object...}) $postData = file_get_contents('php://input'); $data = json_decode($postData, true); # ответ сервера $users = array( 0 => array( "id" => 0, "name" => "Leanne Graham", "username" => "Bret", "email" => "Sincere@april.biz", "phone" => "1-770-736-8031", "website" => "hildegard.org", ) ); echo json_encode($users);
Правильное решение это нужно создавать асинхронную функцию и ждать ответа до полного выполнения await и потом уже обрабатывать данные и тогда вам не нужно будет работать с проммисами.
Владилен, спасибо за урок! Не могли бы подсказать, где проблема в следующей ситуации: POST запрос при загрузке файлов отрабатывается правильно, но если в названии файла есть кириллица, то вместо нее приходит абракадабра. Попробовал и fetch, и XMLHttpRequest. FormData формируется правильно. С postman тестирование проходит без ошибок. с уважением, Юрий
привет, спасибо за урок, лайк автоматом, подписка уже пару месяцев. Но не совсем понял следующее: на 21:44 ты удаляешь код внутри функции sendRequest , конкретно говорю про return new Promise(...) и потом на 22:11 говоришь, что sendRequest возвращает промис, тут я немного запутался. Ты же удалил "return new Promise(...) ", почему он все еще возвращает промис? Прошу простить, если вопрос глупый, только начал изучать JavaScript.
Спасибо, отличный видео-урок, но после того как ты дорабатываешь функцию sendRequest с использованием fetch, для того чтобы она могла принимать метод POST, после данных модификаций, метод GET с этой функцией перестаёт работать и выкидывает ошибку TypeError говорящая о том что у методов GET/HEAD не должно быть параметра body. А в целом сам урок свою цель выполняет, просто функция вроде как делалась для того чтобы работать как с методом GET, так и с методом POST.
Добрый день. Вкладываю полученый массив в глобальный объект window, а консоль возвращает undefined, хотя если смотреть сам объект , то массив в нем есть. Где может быть ошибка?
Думаю, что проблема может быть в том, как ты пытаешься получить данные записанные в объект windows. Попытайся их получить где-нибудь в .then() или через await, если ты работаешь с асинхронной функцией, т.к. записываются они в windows асинхронно. Т.е., если ты где-нибудь в коде просто попытаешься вывести эти данные - console.log(windows.myData), то получишь undefined, т.к. твой вывод сработает раньше, чем запись данных в windows.
Это странно, но я пытался отправить по методу POST данные на сервер в формате json (с нужными заголовками... в общем как в видео) и данные на сервер не передавались. Я так и не понял почему. Но стоило мне изменить формат передачи данных (на param1=value1¶m2=value2) и естественно поменять заголовок на application/x-www-form-urlencoded и данные передались на сервер. Вопрос: почему не получилось передать параметры в JSON-формате?
А как можно получить body из Network -> XHR -> Response на коком-нибудь сайте, чтобы использовать эти данные, например в расширении Chrome? Это вообще возможно сделать через JS? Странно, но в Google и TH-cam ответа на этот вопрос так и не нашлось...
Потому что Fetch всегда возвращает промис, утебя в первом then приходят не данные, а Response объект, данные ты получишь только в следующем then. Используй Promise.all, если хочешь вернуть текст
Результаты конкурса будут завтра :)
Эксклюзивный контент на моем Boosty: boosty.to/vladilen
Только сейчас дошло, как решить задачку.
Мужик, делай то что ты делаешь. Я чуть с ума не сошел пока искал эту инфу в понятном и доступном виде в сети. Пришлось самому всё понимать кое-как, и то не всё. И тут, хвала алгоритмам ютуба, появился ты.
еще раз спасибо + лайк + подпискам (:
Вот это мужик, вот как надо рассказывать, я несколько часов слушал разных индусов, но ни один и в подметки не годится. Спасибо тебе, Бро!!!
ну про индусов ты загнул
МУЖЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫК!
индус - это принадлежность к религии
@@user-hz3zd3nz6h я тоже индусов смотрела😅 не поверите, но все получалось только по их урокам, не надо на них гнать
Так он нихрена нормально и не рассказал
Лучший туториал по этой теме даже спустя 5 лет. Снимаю шляпу!
Вот это я понимаю качественный контент, разложил по полочкам. Владилен, спасибо)
Хочу отметить разницу между Fetch и XHR: при отправке файлов/больших payload'ов на сервер XHR - позволяет получать прогресс загрузки файла на сервер, в то время как Fetch этой информации не предоставляет
Юзал свой jQuery, до фетча все никак не добирался, и наконец у тебя вышел такой видосик, хоть уже что-то и есть про фетч, но тут более понятней и подробней. Пасеба , сэр!
@Валентин Инкогнито как axios использовать на фронте?
@Валентин Инкогнито так а как его подключить это же npm модуль
@Валентин Инкогнито , стоит отметить, что даты нет у гета) если попробуешь отправить, то ошибку получишь)
Хорошо все разобрал, говорим тебе спасибо!
Реально, практически идеальный урок!
Единственное из-за чего картина не совсем до конца складывается, так это из-за того, что были опущены async/await, а также очень хотелось бы увидеть наглядный пример serialize у ajax, но используя fetch
есть отдельное видео по async await и промисы
Владилен вы растете на наших глазах))))) в предыдущих уроках у объекта Владилен поле age был ровен 25))))
кстати, привет из 2020
стареет потихоньку
По-моему еще ЛУЧШЕ все это рассказать просто не возможно. Большое спасибо за видео! Мне кажется, если вы сейчас начнете выкладывать обучающие видео о том, как правильно строить дома - я подамся в строители, потому что ваши видео смотреть - одно удовольствие ! :D :)))
очень толково.
Разложил все по полочкам.
Просто и лаконично.
Для введения самое оно
Это ШЕДЕВРАЛЬНО!
21:00 Fetch(Get)
25:00 Fetch (POST)
Ты хороший человек. Спасибо.
Это не единственный канал по программированию, но единственный с автором, который так хорошо объясняет. Спасибо за знания!
Этот урок классно объяснил🎉
Спасибо, очень и очень полезно и понятно. Только в названии еще Ajax упоминается, но что-то вроде бы в ролике ни слова не было.
спасибо агромное, вот я наконец понял что запросы и как они работают
Владилен, спасибо большое тебе за твой труд! Однозначно ЛАЙК!!!
Просьба, сделай пожалуйста подробный гайд по axios!
Спасибо! Отличные уроки по js. Все ясно понятно. Ну прям огонь🔥
крутая подача! все четко, без H2O
Согласен)
Даже под C2H5OH хорошо заходит)
Очень клевое расширение для Гитхаба, спасибо Владилен. Даже пассивно умеешь помогать :)
Супер. Полдня убил на понимание запросов. С jQuery ajax всё получалось, а native js не поддавался.
урок правда полезный, спасибо
Огромное спасибо! Продолжай в том же духе! Очень жду роликов по выполнению каких-то проектов на реакте.
Их много на канале
Владилен, запиши видос про графику на canvas, никогда этим не пользовался и не сталкивался, но очень было бы увидеть и послушать профессионала на эту тему. Ты же вроде разбирался с этим как раз, когда в конкурсе Telegram участвовал, вот было бы очень интересно послушать как ты все писал и как работать с графикой
Спасибо большое за этот видео урок, обыскал весь интернет, но некто так грамотно как вы не смог рассказать а тут всё ясно и понятно , 😎
лучший канал) спасибо
класс. как раз сейчас работаю с с запросами. прям вовремя
Поддерживаю, что нужен видеоурок про rest & spread.
Как раз завтра будет)
Смотрел кучу видео на эту тему, ваше - лучшее! Огромное спасибо за качественный контент и удачи вашему каналу!
Супер! Надеюсь, это мне поможет всё-таки сделать тестовое задание
Досмотрел плейлист. Спасибо за уроки !
Спасибо огромное за ваши уроки! Хоть по темам уже ушли далеко вперед, но было бы неплохо услышать про DOM/BOM с вашими пояснениями. Заранее спасибо
Спасибо, очень полезное видео.
Спасибо, классное и подробное объяснение, удивляюсь что подписчиков не раза в 2 - 3 минимум, больше.
Смотрю с удовольствием. Спасибо, Владилен!
Спасибо, Владилен!
11:23 ошибка сработала в 10-й строке при событии onload, а не при событии onerror (строка 14). Почему так?
Когда приходит ответ, не важно с кодом ошибки или нет, это считается нормальным ответом http и срабатывает событие onload. Чтобы получить событие onerror можете попробовать отключить интернет и запустить скрипт, получите ошибку типа "net::ERR_INTERNET_DISCONNECTED" как раз из события onerror.
Урок пройден) Спасибо!!! Очень круто все разобрано, все понятно! Супер!
спасибо огромное! очень помог!
Обожаю Ваши видео. Всегда всё четко и по делу. Спасибо большое за труд!
Огромное спасибо! Я тоже пересмотрела на эту тему много видео. Это - лучшее из всех! Удачи!!!
спасибо большое, раньше использовал только axios,ajax(jquery) теперь в курсе про нативные методы
Спасибо за видео!
С этим сайтом json placeholder понятно, а как быть с локальным своим сайтом? Там что должно быть, в самом простом варианте, файл index.php и в нем что должно быть? Чтобы мы могли получить данные.
И еще, т. к. тут упоминается ajax, то что тут рассматривается, мы получаем данные с сервера, я например хочу сделать, чтобы эти полученные данные отображались на странице сайта, то они будут добавляться Без перезагрузки страницы?
круто, действительно очень познавательно, как только появятся деньги отблагодарю, курс куплю или задоначу, очень понятно, а главное отвечает на все вопросы которые мучали раннеее
Согласен со многими! Владлен давай!
А, если по простому --- Спасибо! Вас, Владлен, мне рекомендовал Димыч). Спасибо обоим!!
Fetch как раз учу сейчас, спасибо за подгон)
зачетный ролик! работать с XHR классом как по мне проще для понимания чем с fetch(). классе все явно указывается а в fetch неявные промисы и прочие методы, мне нубу без доков не разобраться.
Fetch уже был в Уроке8. Вообще плейлист как-то не структурирован, всё намешано в куче, вроде смотришь с 1 урока, а потом все темы в разнобой
Спасибо огромное разобрали супер. поставил бы два лайка даже. подписался.
Теперь хоть разобрался зачем был нужен XMLHttpRequest. Спасибо.
Хотелось бы разобрать как правильно проектировать бекенд + фронт. А то столько мнений не знаешь кто прав.
Спасибо за урок!
Благодарю за то что помогаешь обучаться разработке на javascript!
Да!! просто нечеловеческое спасибо!!! а скажешь что за шаблон подсветки кода у тебя установлен?
Владилен, спасибо тебе за твои видео. Очень помогают!
Нет ли у тебя в планах записать мастер класс по DevTools бразуера?
У тебя очень много уроков в которых ты объясняешь, как что-то сделать с нуля, с этим все более-менее понятно. Мог бы ты записать какой-нибудь курс, в котором ты бы взял какой-нибудь open-source проект, и показал от и до, как разобраться в новом проекте, с чего начать, как правильно читать код, как структурировать полученную информацию и приступить к допиливанию своего функционала. (Лично меня интересуют проекты на Angular и чистом JS).
Наш инстинкт . Когда хотим создавать объект, моментально в голову приходит "key" name и age .
Отлично! Спасибо. Хорошие уроки. Пришлось про CORS погуглить :)
на самом деле ты читаешь мои мысли.. хотел попросить урок по fetch и вот спс тебе
Владилен, хотелось бы узнать полное взаимодействие базы, сервера, и приложения. Давай разберём остальные методы зачем они нужны и когда используются
Огонь, теперь хватает знаний чтобы полчить данные со своего REST api
всё круто, лайк подписка! Было бы ещё круче если б делал пометки // хотя б простенькие) спасибо)
Давайте больше таких видео
Дарова
Очень доступно. Но подскажите как использовать полученные данные, где они хранятся и т.п.
Лайк не глядя!
Согласен, лайк
Спасибо большое, Владилен! 😍😍😍
Я реально испугался, когда ты не поставил точку с запятой, а потом вспомнил - это же js......)
22:42 'Мы можем его ?зачейнить? с помощью метода then'. Что значит зачейнить и откуда это слово?
уроки ТОП! всё чётко и по полочкам.
спасибо!
Шикарное объяснение, ты прям прирожденная училка!)
Лайк однозначно)
Как получить отправленные данные с клиента методом POST на сервере? Пробовал реализовать как у вас fetch, но он возвращал мне мою html страницу на сервере. Хотя на самом клиенте данные отправляются и если смотреть в браузере, они находятся в Network в разделе Headers/Request Payload. Как мне достать оттуда мои данные на локальном сервере?
ТОП урок!!!
Подскажи, пожалуйста, как так сделать, в названия методов внутри () скобок писались, как у тебя допустим
sendRequest ( method: "POST") - как сделать так чтоб "method" показывался?
это расширение какое-то ??
в уроке, видимо, ошибка. Если в готовом коде закомментить метод POST и раскомментить GET, то -- Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body . Получается, что в функции sendRequets для GET не может быть body в качестве аргумента, и в промисе тоже. Даже если если он равен нуллу
не-не.... если боди равен нуллу - всё норм, а так - да, ошибочка в коде есть... Просто body надо стрингифаить отдельно и ставить проверку на метод... типа if(method==='POST'){body=JSON.stringify(body)}, а в инициализации вместо body : JSON.stringify(body) поставить body : body, так как по умолчанию body = null , то и всё норм работает
пару заметок, если кто-то захочет постестироват запросы через свой PHP-сервер (маловероянтно, конечно, что найдутся такие же недалекие люди, как я, но все же ...):
я кучу времени потратил, чтобы угадать, как там должно быть сделано, чтобы все работало ....
итак, в вашем PHP файле:
# заголовки, чтобы сервер вообще смог хоть что-то ответить на запрос
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept"); # чтобы все работало после указания xhr.setRequestHeader('Content-Type', 'application/json');
# распарсивалка данных, передаваемых не строкой, а в виде JSON.stringify({...object...})
$postData = file_get_contents('php://input');
$data = json_decode($postData, true);
# ответ сервера
$users = array(
0 => array(
"id" => 0,
"name" => "Leanne Graham",
"username" => "Bret",
"email" => "Sincere@april.biz",
"phone" => "1-770-736-8031",
"website" => "hildegard.org",
)
);
echo json_encode($users);
Блин спасибо большущее)))))
XHR не поддерживает запросы через прокси? Погуглил, вроде нет. Хотя странно, в питоне request session get/post без проблем это делает.
Можно сделать это всё в пару строк кода. Используя Async, await. Как раз вы уже снимали видео про них.
Есть сссылка ?
Очень крутой канал! предлагаю рассказать про Регулярные выражения мне кажется интересная тема.
Правильное решение это нужно создавать асинхронную функцию и ждать ответа до полного выполнения await и потом уже обрабатывать данные и тогда вам не нужно будет работать с проммисами.
Очень круто
Владилен, спасибо за урок!
Не могли бы подсказать, где проблема в следующей ситуации: POST запрос при загрузке файлов отрабатывается правильно, но если в названии файла есть кириллица, то вместо нее приходит абракадабра. Попробовал и fetch, и XMLHttpRequest. FormData формируется правильно. С postman тестирование проходит без ошибок.
с уважением,
Юрий
Подскажите плиз, а че в js, уже не нужны точка с запятой в конце команд?? спасибо!
Отличный урок, проходит со свистом ))
а можно без onerror
на try catch например
привет, спасибо за урок, лайк автоматом, подписка уже пару месяцев. Но не совсем понял следующее: на 21:44 ты удаляешь код внутри функции sendRequest , конкретно говорю про return new Promise(...) и потом на 22:11 говоришь, что sendRequest возвращает промис, тут я немного запутался. Ты же удалил "return new Promise(...) ", почему он все еще возвращает промис? Прошу простить, если вопрос глупый, только начал изучать JavaScript.
fetch возвращает промис
видео огонь!
Thank u very much, really understandable. U just explained things in so clear way
Спасибо, отличный видео-урок, но после того как ты дорабатываешь функцию sendRequest с использованием fetch, для того чтобы она могла принимать метод POST, после данных модификаций, метод GET с этой функцией перестаёт работать и выкидывает ошибку TypeError говорящая о том что у методов GET/HEAD не должно быть параметра body. А в целом сам урок свою цель выполняет, просто функция вроде как делалась для того чтобы работать как с методом GET, так и с методом POST.
Согласен, тоже это заметил
Спасибо ♥
Добрый день.
Вкладываю полученый массив в глобальный объект window, а консоль возвращает undefined, хотя если смотреть сам объект , то массив в нем есть.
Где может быть ошибка?
Думаю, что проблема может быть в том, как ты пытаешься получить данные записанные в объект windows. Попытайся их получить где-нибудь в .then() или через await, если ты работаешь с асинхронной функцией, т.к. записываются они в windows асинхронно. Т.е., если ты где-нибудь в коде просто попытаешься вывести эти данные - console.log(windows.myData), то получишь undefined, т.к. твой вывод сработает раньше, чем запись данных в windows.
Спасибо, здорово
Это странно, но я пытался отправить по методу POST данные на сервер в формате json (с нужными заголовками... в общем как в видео) и данные на сервер не передавались. Я так и не понял почему. Но стоило мне изменить формат передачи данных (на param1=value1¶m2=value2) и естественно поменять заголовок на application/x-www-form-urlencoded и данные передались на сервер. Вопрос: почему не получилось передать параметры в JSON-формате?
А как можно получить body из Network -> XHR -> Response на коком-нибудь сайте, чтобы использовать эти данные, например в расширении Chrome? Это вообще возможно сделать через JS? Странно, но в Google и TH-cam ответа на этот вопрос так и не нашлось...
Яверно считаю, чтобы написать Пост и Гет запросы нужно писать отдельные функции?
спасибо
Возможно задам глупый вопрос, но можно получать данные в виде XML?
return fetch(url).then((data) => {
console.log(data.text());}) почему такой код возвращает промис, а не текст?
Потому что Fetch всегда возвращает промис, утебя в первом then приходят не данные, а Response объект, данные ты получишь только в следующем then. Используй Promise.all, если хочешь вернуть текст