JSON формат передачи данных, глубокое клонирование объектов

JSON – JS object notation текстовый формат объмена данными служит для передачи и хранения данных. Набор пар ключ-значение, все строки должны быть в двойных кавычках. В качестве объекта могут быть {} [] n s &&|| null можно получить небольшую не релеционную базу данных.

Маленький вес файлов; простота чтения файлов

До JSON использовался язык XML

 

parse   XML

При помощи JSON создаются глубокие копии объекта

1) превращаев в формат JSON 2)  распарсит объект JS  и поместит его в clone с глубокой, независемой копией  от первоначального объекта

AJAX и общение с сервером

Нагляндеый пример фильтры в интернет магазине, когда изменяется содержание страницы без полной перезагрузки страницы, тут изменяется контент подгружаемый с сервера

Asinhronius JS and XML – всегда работает ассинхронно, но можно изменить этот параметр вручную.

'use strick';

 

const inputRub = document.querySelector('#rub'),

inputUsd = document.querySelector('#usd');

 

inputRub.addEventListener('input', () => {

const request = new XMLHttpRequest();

//open собирает настройки, которые помогут сделать запрос он принимает в себя несколько

request.open('GET', 'js/current.json'); // методов(method, url, async, login, pass)

//HTTP методы GET & POST, url - куда посылать запросы. Важный момент - запросы посылаем из html файла

//страничка работает в браузере и на ней работают скрипты путь должен формироваться относительно

// index.html аргументы async, login, pass необязательны

// Когда отправляем запрос нужно сказать что именно мы отправляем. Какая информация? В чём она закадирована?

// делается это для того, чтобы трансферные протоколы чётко понимали что они передают и когда они приходит на сервер

// сервер понимает что он точно принимет в себя - это json файл или изоброжения и т.п Для этого существуют HTTP заголовки

// заголовок для передачи JSON

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

//когда все приготовления готовы можно отправить запрос при помощи метода send, данный метод зависит от метода

// который используется request.open GET/POST. Когда отправлем GET запрос мы просто запрашиваем информацию - по факту

// мы ничего не отправляем на сервер если же POST запрос, то отправляются данные и метод send может принимать body

// request.send(body), body - данные которые уходят на сервер, он существует только в POST и других методах, которые

// отправляют данные на сервер. В GET body не будет

request.send();

// после трех методов open, setRequestHeader, send мы отправили запрос и дальше с ним нужно что-то делать. Данная операция ассинхронна

// серевер может ответить через 3 мс, так и через 5 сек. Зависит это от сервера и качества интернет соединения

// это разобрали методы объекта XMLHttpRequest. Теперь поговорим о свойствах этого объекта

// получаем ответ от сервера и начинаем использовать эти данные

// status - свойство показывающий статус запроса 404/0/200/ и т.п

// statusText - текстовое описание ответа от сервера

// response - ответ от сервера, в котором лежит ответ который задал Backend разработчик, то что мы должны использовать на клиенте

// readyState - текущее состояние запроса https://developer.mozilla.org/ru/docs/Web/API/XMLHttpRequest/readyState

// события которые относятся к объекту XMLHttpRequest

// loadStart

// progress

// timeout

request.addEventListener('readystatechange', () => { //readystatechange событие которые отслеживает статус нашего запроса в данный текущий момент

if (request.readyState === 4 && request.status === 200) {

console.log(request.response);

const data = JSON.parse(request.response);

inputUsd.value = (+inputRub.value / data.current.usd).toFixed(2);

} else {

inputUsd.value = "Что-то пошло не так";

}

});

 

});

'readystatechange' change on ‘load’ and revome (request.readyState === 4 &&)

 

 Список кодов состояния HTTP

Заголовки HTTP

Использование Объектов FormData

Использование XMLHttpRequest

XMLHttpRequest

Из FormData в JSON

 

Promise (ES6)

 

+ resolve() – работает с блоком кода then();

- reject() - работает с блоком кода catch(), обычно прописывается в конце цепочки;

console.log('Запрос данных');

 

const req = new Promise(function(resolve, reject) {

setTimeout (() => {

console.log('Подготовка данных...');

const product = {

name: 'TV',

price: 2000

};

resolve(product); // при положительном исходе будет исполнена фунция resolve = req.then

}, 2000);

});

req.then ((product)=> {

const req2 = new Promise((resolve, reject) => {

setTimeout(() => {

product.status = 'order';

resolve(product);

}, 2000);

});

req2.then(data => {

console.log(data);

});

});

 

Огромное приимущество перед calback - можно возвращать Promise по цепочке

req.then ((product)=> {

return new Promise((resolve, reject) => {

setTimeout(() => {

product.status = 'order';

resolve(product);

}, 2000);

});

}).then(data => {

console.log(data);

});

 

 

Есть блок кода finally() который ставиться в самом конце и под этим подразумеватся то, что обяательно должно выполнится в не зависимости от resolve и reject

 

https://learn.javascript.ru/promise-basics

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise

И не обязательно постоянно использовать promise

console.log('Запрос данных');

 

const req = new Promise(function(resolve, reject) {

setTimeout (() => {

console.log('Подготовка данных...');

 

const product = {

name: 'TV',

price: 2000

};

 

resolve(product); // при положительном исходе будет исполнена фунция resolve = req.then

 

}, 2000);

}).then ((product)=> {

return new Promise((resolve, reject) => {

setTimeout(() => {

product.status = 'order';

resolve(product);

}, 2000);

});

}).then(data => {

return new Promise ((resolve, reject) => {

setTimeout(() => {

data.private = false;

console.log("Go go go!");

resolve(data);

}, 3000);

});

}).then(body => {

console.log(body);

reject();

resolve(body);

}).then(body => {

body.change = 'Yes';

return body;

}).then((body) => {

console.log(body);

}).catch(()=> {

console.error('we have a problem');

});

У promise есть два метода

Promise.all () – глобальный объект, пруимущество в том, что пока все промисы указанные в массиве не будут выполнены, он не успакоится и потом только что-то будет делать

Promise.race () – выполняет своит действия, когда самый первый промис отработал

const test = time => {

return new Promise(resolve=> {

setTimeout(()=> resolve(), time);

});

};

 

// test(1000).then(()=>console.log('1000ms'));

// test(3000).then(()=>console.log('3000ms'));

 

Promise.all([test(1000), test(3000)]).then(()=>console.log(`Time`));

Через 3000ms выведет сообщение Time, как бы говоря, что все промисы выполнены

 

Promise.race([test(1000), test(5000)]).then(()=>console.log(`Time`));

Надпись Time всплывёт через 1000ms т.к дынный промис самый быстрый, но завершиться работа через 5000ms;

 

 

Fetch API

Объединеи промисов и общения с сервером

API – aplecation program intereis интерфейс с которым я моу работать

DOM API – doqument.quareSelector() и т.п

Fetch API – построяна на промисах и помогает общаться с сервром

JSONPlaceholder – готовок фейковое API

Это GET запрос

fetch('https://jsonplaceholder.typicode.com/todos/1')

.then(response => response.json())

.then(json => console.log(json));

response.json() – в данном API это JSON.parce(), т.е с сервера приходит ответ(response) в виде JSON строки, а response.json() преобразует его в объект

Это POST запрос

fetch('https://jsonplaceholder.typicode.com/posts', {

method: 'POST',

body: JSON.stringify({name: 'Alex'}),

headers: {

'Content-type': 'application/json'

} – обязательные элементы

})

.then(response => response.json())

.then(json => console.log(json));

 

 

NPM

NPM – Node pacet manager кусочки кода призванные облегчить работу

Команды npm init установит package.json

sudo npm I json-server –g  глобальная установка для мак

npm I json-server локальная установка

Если вы устанавливаете его локально в своем проекте, используйте npx для его запуска

npx json-server --watch db.jsonnpm install -g json-server – глобально. Запуск json-server db.json

npm i – если у скаченного репозитория есть package.json, то данная команда поможет установит все необходимые для работы в этом проекте npm пакеты

типы пакетов

npm I json-server --save-dev флаг подраз. Что это для разраб (зависимость разработки)

npm I json-server --save для работы проект в нутри костяк прил и веба (JQ/React…)

json-сервер не распознается как внутренняя или внешняя командаОшибка «Невозможно загрузить файл ….ps1

https://github.com/typicode/json-server