Майк МакГрат - JavaScript для начинающих

который вам необходимо получить.
Метод fetch( ) асинхронный, поэтому другие операции могут выполняться в ожидании получения ресурса. По завершении он возвращает объект Promise,
содержащий ответ (объект HTTPResponse).
Как правило, метод fetch( ) получает ресурс JSON,
и проанализировать его можно с помощью метода json( ) объекта HTTPResponse. Затем возвращенные данные JSON передаются в качестве аргумента
следующему связанному методу промиса, который,
в свою очередь, передает данные JSON в функциюобработчик. Процесс выглядит следующим образом:

187

fetch( url )
.then( function( response ) { return response.json( ) } )
.then( function( data ) { return обработчик( data ) } )
.catch( function( err ) { return console.log( err ) } )

Стрелочные функции
Стрелочные функции представляют собой сокращенную версию обычных функций. Они образуются с помощью знака =>. Это позволяет опустить ключевое слово функции, например:
.then( ( response ) => { return response.json( ) } )

Если тело функции содержит только один оператор,
и этот оператор возвращает значение, вы также можете опустить фигурные скобки и ключевое слово
return, например:
.then( ( response ) => response.json( ) )

Параметры могут отображаться в виде списка, разделенного запятыми и заключенного в круглые скобки ( ). Если функция принимает один параметр,
то скобки вокруг него можно опустить, например:

В стрелочных
функциях ключевое слово this
представляет
объект в исходном контексте,
тогда как в обычных ключевое слово this представляет объект, который
вызывает функцию.

Разработка веб-приложений

fetch( url )
.then( response => response.json( ) )
.then( data => обработчик( data ) )
.catch( err => console.log( err ) )

Обратите внимание, что стрелочные функции обрабатывают ключевое слово this иначе, чем обычные.

JSON

{}

z
1

Откройте текстовый редактор, например,
в Windows приложение Notepad (Блокнот).
Создайте документ JSON с объектом, содержащим пять пар key: value (атрибут: значение).

weekdays.json

188

z
z
2

Сохраните документ JSON на веб-сервере в папке «htdocs», чтобы он был доступен
по сети.

3

Создайте асинхронный HTTP-запрос, создав
промис, разрешенный посредством получения данных JSON.

fetch.html

z
4

z
5

fetch( 'http://localhost/weekdays.json' )
.then( response => response.json( ) )
.then( data => list( data ) )
.catch( err => console.log( err ) )

Создайте функцию для распечатки данных.
function list( data ) {
const values = Object.values( data )
let i = 0
while( i < values.length ) { console.log( values[ i ] ); i++ }
}

Сохраните HTML-документ и документ JSON. Затем через HTTP откройте веб-страницу и запустите консоль, чтобы
просмотреть полученные данные. Для этого выберите пункт Developer Tools (Инструменты разработчика) => Console (Консоль).

Разработка интерфейса
Теперь приступим к созданию веб-приложения, которое
позволит динамически обновлять данные на веб-странице без ее перезагрузки. Интерфейсом предусмотрена форма ввода и таблица с несколькими пустыми
ячейками. Некоторые ячейки изначально заполняются данными JSON, а другие вычисляются.

1

Создайте HTML-документ с таблицей в основном разделе документа.
--">