Что именно делает response.json()? — JavaScript

микро4950816268

1

Ссылка на урок:
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-async-javascript-and-http-requests/modules/wdcp-22- Learn-javascript-syntax-requests/lessons/js-requests-with-fetch-api/exercises/intro-to-fetch-get-requests

Диаграмма в уроке показывает, что response.json() преобразует объект ответа в JSON, но после исследования кажется, что response.json() возвращает обещание, которое разрешается в объект JavaScript. Так что же это, я запутался в этом пункте

Адамгаффни96

2

В каком-то смысле оба варианта верны. JSON означает Нотация объекта Javascript , и в самом простом описании преобразование в JSON означает просто получение объекта Javascript. Когда у вас есть файл JSON, это просто файл, содержащий один автономный объект Javascript, обычно используемый в качестве хранилища данных. Поэтому, когда Promise возвращает объект Javascript, этот объект, конечно же, выражается в нотации объекта Javascript, т.е. это JSON.

Теперь, когда вы точны, JSON не является конкретно объектом Javascript, поскольку его можно использовать в качестве носителя данных для многих языков программирования, однако на ваш вопрос я бы сказал, что он должен рассматриваться как просто объект Javascript. сделать это достаточно ясно. В то время как

response.json() не буквально просто выполняет прямое преобразование ответа в файл JSON или что-то еще, это фактически то, что он делает с точки зрения использования значения, полученного из response.json() в вашей работе.

2 лайка

микро4950816268

3

Адамгаффни96:

Преобразование

в JSON просто означает получение объекта Javascript.

Но тогда, если ответ уже является объектом JavaScript, какой в ​​этом смысл?

Адамгаффни96:

Поэтому, когда обещание возвращает объект Javascript, этот объект, конечно же, выражается в нотации объекта Javascript, т. е. это JSON.

Какое обещание вы имеете в виду? Тот, который был возвращен fetch() , или тот, который был возвращен response.JSON()

?

стрелы

4

микро4950816268:

Но тогда, если ответ уже является объектом JavaScript, какой в ​​этом смысл?

Ответ представляет собой объект JSON. Немного разные вещи.

response.JSON() преобразует его во что-то, что вы можете использовать в JS.

1 Нравится

микро4950816268

5

стрелы:

Ответ представляет собой объект JSON.

Но на диаграмме урока сказано, что ответ преобразуется в объект JSON

janbazant1107978602

, 17:57

6

Является ли объект JSON строковой версией объекта?

Адаптивный дизайн для мобильных устройств в HTML5.

Response — это экспериментальный плагин jQuery для создания веб-сайтов с адаптивным контентом. Он может динамически менять содержимое на основе точек останова и атрибутов данных.

Самая мощная функция Response — наборов точек останова . Используя наборы, содержимое для устройств с более широкими возможностями и/или больших окон просмотра можно хранить в атрибутах данных HTML5. Дизайнеры могут создавать пользовательские наборы, чтобы обеспечить именно ту функциональность, которую они хотят.

(По умолчанию ничего не настроено.)

Запись
разметки вроде:
  

    data-min-width-  320   = 'image @ 320+ видовых экранов'
    data-min-width-  961   = ' png alt="image @ 961+ видовых экранов">'
  > 
  только текст @ <320px и без js
Или загрузите другой
src :
  <-- Загрузить  lo-fi.png    для устройств шириной 0–640 пикселей или 
 
 no-js  . 
     Загрузить  hi-fi.png    для устройств шириной 641 и более пикселей. -->  
  <   img  src="lo-fi.png" data-min-device-width-641="hi-fi.png" alt="example"  >

Точки останова могут основываться на ширине | ширина устройства | высота | высота устройства | device-pixel-ratio или на пользовательских реквизитах. Дизайнеры могут использовать контрольные точки по умолчанию (идеально подходит для 960 сеток) или указать пользовательские точки останова.

Использование JSON, как показано ниже, является самым простым способом создания наборов. Наборы также можно создавать в JavaScript с помощью Response.

create. В любом случае варианты одинаковы.

Пример настройки JSON 
    data-responsejs  ='  { 
  "создать":  [{ 
    "опора": "ширина",
    "prefix": "min-width- r src",
    "точки останова":  [ 0, 320, 481, 641, 961, 1025, 1281  ] 
    }] 
  }  '  >

Используйте пользовательские точки останова или используйте точки останова по умолчанию:

  • ширина / ширина устройства : [0, 320, 481, 641, 961, 1025, 1281]
  • высота / высота устройства : [0, 481]
  • отношение пикселей устройства : [1, 1,5, 2]

Элементы ведут себя в одном из двух режимов — markup или src . Начиная с версии 0.3.0, режимы определяются автоматически, и необходимо создать только один набор точек останова для обоих. (Разработчикам 0. 2.x следует обратить внимание, что более эффективно создавать наборы с псевдонимами префиксов, такими как "prefix": "r src" , а не создавать отдельные наборы для каждого режима. Любой метод работает. Версия 0.3.0 и примечания к изменениям 0.3.1 расширяют это, и, при необходимости, старые документы все еще находятся в сети

)

Разница между режимами заключается в заменяемом содержимом. В режиме src Атрибут src поменялся местами. В режиме разметки innerHTML заменяется. Режим разметки имеет более широкие возможности, поскольку можно менять местами целые блоки кода.

изображение | ввод | источник | встроить | Элементы track всегда ведут себя в режиме src.

iframe | аудио | video ведет себя в режиме src только при наличии атрибута src .

В противном случае элементы ведут себя в режиме разметки.

режим источника

src mode ▰ применяется к элементам, использующим атрибут src .
  <-- Загрузить  lo-fi.png  , когда ширина области просмотра составляет 0–480 пикселей или  no-js  . 
     Загрузить  medium.png , когда окно просмотра имеет ширину 481–1024 пикселей. 
     Загрузить  hi-fi.png    при ширине окна просмотра более 1025 пикселей. -->  
  <   img  src="lo-fi.png" данные-  src   481  ="medium.png" данные-  источник   1025  ="hi-fi.png" alt="пример" 
 
 />

Рассмотрите возможность объединения тегов в тег , который ссылается на большую версию. Это позволяет использовать две версии образа в большем количестве ситуаций без ущерба для производительности.

режим разметки

режим разметки ▰ применяется к элементам, поддерживающим внутреннюю разметку.
 <-- Сохранить  по умолчанию , если окно просмотра имеет ширину <320 пикселей или  нет-js  . 
     Загрузить  data-r320 , когда окно просмотра имеет ширину 320–960 пикселей. 
     Загрузить  data-r961 , когда окно просмотра имеет ширину 961 пиксель+. --> 
 
 320  ="markup @ 320+" data-r  961  ="markup @ 961+">   default
Передовой опыт в режиме разметки:
  • Разметка по умолчанию должна быть облегченной, а атрибут(ы) данных следует использовать для показа более насыщенного (тяжелого) контента на соответствующих экранах. Думайте в первую очередь о мобильных устройствах.
  • Разметка по умолчанию может быть пустой. Но для доступности, семантики и SEO рассмотрите возможность использования по умолчанию только текста , который при необходимости можно скрыть/показать с помощью CSS медиа-запросов.
  • При необходимости экранируйте кавычки в значениях атрибутов, чтобы предотвратить несоответствие кавычек.
режим разметки ▰ в режиме разметки HTML можно поменять местами.
  <а 
   href  =hi-fi.png
   данные-мин-ширина-  320   = 'image @ 320+'
   data-min-width-  961   = 'image @ 961+'
  > 
 только текстовая ссылка @ <320px и без js
Идеальное использование для режима разметки:
  • Загружайте боковые панели только для экранов, достаточно широких для их размещения.
  • Загружать изображения только для экранов выше определенной точки останова — с откатом без изображения. (В блоге вы можете загружать заголовки статей на маленькие экраны и добавлять миниатюры на экраны выше контрольной точки.)
Экранирующие кавычки в атрибутах данных
  ХОРОШО  : data-r0="здесь текст"
  ХОРОШО  : data-r0=" "  myid  "  >вот текст"
  ХОРОШО  : data-r0='здесь  '  s текст'
  FAIL  : data-r0='здесь'  s text'
CMS Интеграция

В CMS или в других ситуациях, когда входные данные режима разметки являются динамическими, вам наверняка понадобится какая-то экранирующая функция, такая как PHP htmlspecialchars() или WordPress esc_attr() .

Response предоставляет совместимые с разными браузерами способы получения и тестирования свойств, которые имеют значение при создании адаптивных веб-сайтов, внедрение набора данных HTML5, перехватчики событий для адаптивных действий и сопутствующие утилиты. Обзор API приведен ниже. Дополнительная документация находится на Github и в наборе тестов.

Response.deviceW() // Получить ширину устройства .
@Example jsfiddle.net/ekhwf/5/
@return №
923333333.dev.
@example jsfiddle.net/eKHWF/5/
@return номер
2 Ответ().deviceMax
20108 // Get the calculated Math.max (deviceW, deviceH)
@example jsfiddle.net/eKHWF/5/
@return number
Response. deviceMin() // Get the calculated Math.min (deviceW, deviceH)
@example jsfiddle.net/eKHWF/5/
@return number
Response.viewportW() // Получить текущую ширину области просмотра .
@Example JSFIDDLE.NET/EKHWF/5/
@return №
292333333 .
@example jsfiddle.net/eKHWF/5/
@return номер
2 Response.scrollX() // кросс-браузерный эквивалент нативного window.scrollX
@return номер
Response.scrollY() эквивалент нативного window.scrollX // cross-brosscrollY()
@возврат номер
Response.band( min [ max ]) // Проверить, активен ли диапазон окна просмотра min/max- width .
@param целое число min
— минимальная ширина в пикселях.
@param целое число max
— максимальная ширина в пикселях.
@return BOOLEAN 
  Ответ. Бесчатка   (  481          .  
  Response.band   (   0  ,  480   )   // true в окнах просмотра шириной 0-480 пикселей.
Response.wave( min [ max ]) // Проверить, активен ли диапазон viewport min/max- height .
@param целое число min
— минимальная высота в пикселях.
@параметр целое число max
— максимальная высота в пикселях.
@return BOOLEAN 
  Ответ. WAVE   (  481    9018 9018  9018   .  
  Response.wave   (   0  ,  480   )   // true в окнах просмотра высотой 0-480 пикселей.
Response.device.band( мин [ max ]) // Проверить, активен ли диапазон min/max- ширины устройства .
@param целое число min
— минимальная ширина в пикселях.
@param целое число max
— максимальная ширина в пикселях.
@return логический 
  Response.device.band   (   481   )   // верно для устройств шириной 481px и выше.  
  Response. device.band   (   0  ,  480   )   // верно для устройств шириной 0–480 пикселей.
Response.device.wave( min [ max ]) // Проверить, активен ли диапазон min/max- device-height .
@param целое число min
— минимальная высота в пикселях.
@param целое число max
— максимальная высота в пикселях.
@return Boolean 
 .  
  Response.device.wave   (   0  ,  480   )   // верно для устройств высотой 0–480 пикселей.
Response.dpr( ratio ) // Получите тест device-pixel-ratio , или , если данный device-pixel-ratio активен.
@param number ratio
is a device-pixel-ratio to test (integer or float)
@return number|boolean 
   Ответ. dpr   (   )   // получить отношение пикселей к устройству (возвращает 0, если не обнаруживается)  
  Response.dpr   (   1,5   )   // истина, когда отношение устройств к пикселям равно 1,5+  
  Response.dpr   (   2   )   // истина, когда отношение устройств к пикселям равно 2+
Response.media( запрос ) // Получить window.matchMedia || окно.msMatchMedia || {}

Это нормализованный браузером общий метод, предназначенный для случаев, когда ни одно из приведенных выше логических значений не применимо. Он использует тот же синтаксис, что и window.matchMedia, и изящно отступает, когда не поддерживается. Вышеуказанные логические значения (группа, волна и т. д.) быстрее и лучше поддерживаются, чем этот метод (хотя вы можете полифилировать matchMedia перед загрузкой Response для улучшения поддержки).

@param string query
— медиа-запрос для тестирования.
@return объект
Свойство .matches является логическим (или неопределенным, если ни одна из форм не поддерживается).
  Response.media   (   "(min-width: 20em)"   )   .matches   // true в окнах просмотра шириной 20em+.
Response.inViewport( elem [ verge ]) // Проверить, находится ли какая-либо часть элемента в области просмотра .
@param объект elem
— собственный элемент DOM или объект jQuery для тестирования.
@param номер грань
— это # ​​дополнительных пикселей вокруг элемента, который также нужно проверить. (По умолчанию 0)
@return Boolean
@Example Реакция.0149 ( this ) // истина, если какая-либо часть этого находится в области просмотра (точно). 
  Response.inViewport   (   this  ,  100   )   // true, если какая-либо часть  этого  находится в окне просмотра (или на расстоянии 100 пикселей рядом).  
  Response.inViewport   (   это   )  ===  Response.inX   (   это   )  &&  Response.inY   (   this   )   // всегда верно
Response.inX( elem [ verge ]) // Проверить, находится ли какая-либо часть elem в той же оси X , что и окно просмотра.
@param объект elem
— собственный элемент DOM или объект jQuery для тестирования.
@параметр номер край
— это # ​​дополнительных пикселей вокруг элемента, которые также нужно проверить. (Defaults to 0)
@return boolean
@example responsejs.com/test/
   Response.inX    (    this    )     // true, если какая-либо часть  этого  находится на той же оси X, что и область просмотра (точно).  
  Ответ.inX   (   this  ,  100   )   // true, если какая-либо часть  этого  находится на той же оси x (или на расстоянии 100 пикселей рядом).  
  Ответ. INVIEWPORT   (  Это  )  ===  Ответ.inx   (  Это  )   / True There a This no If an this no if an this no an ar ar this no if an this no an ar ar vertial )   / true. 
      Response.inY(  elem  [  Verge  ])  // Проверить, есть ли какая-либо часть 9Элемент 0968  находится на той же оси Y  , что и окно просмотра.   
 
  @param   объект   elem  
 
 — собственный элемент DOM или объект jQuery для тестирования. 
 
 
 
  @param   номер   грань  
 
 — это # ​​дополнительных пикселей вокруг элемента, который также нужно проверить. (По умолчанию 0) 
 
 
 
  @return   логический  
 
 
 
 
  @example  responsejs.com/test/ 
 
 
 
  Response.inY   (   this   )   // true, если какая-либо часть  этого  находится на той же оси Y (точно так же, как и ось y).  
  Response.inY   (   this  ,  100   )   // true, если какая-либо часть  этого  находится на той же оси Y (или на расстоянии 100 пикселей рядом с ней).   
  Response.inViewport   (   this   )  ===  Response.inY   (   this   )   // true если нет горизонтального переполнения  
 Response.ready(  fn  )  // Функция вызова, когда  DOM   готов  .  
  @param   обратный вызов   fn 
 — это функция для вызова при готовности.
  Ответ.готов   (   функция  (){  /* все готово */  }  )  ; 
 Response.resize(  fn  )  // Вызов функции всякий раз, когда окно (просмотр)  изменяет размер  .  
  @param   обратный вызов   fn 
 — это функция для вызова события изменения размера.
  Response.resize   (   function  (){  /* что нужно сделать при изменении размера */  }  )  ; 
 Response. action(  fn  )  // Функция вызова, когда  DOM   готова   и  всякий раз, когда окно  изменяет размер  .  
  @param   callback   fn 
 это функция для вызова готового  и  изменения размера.
  Response.action   (   function  (){  /* что нужно сделать при готовности и изменении размера */  }  )  ; 
 Response.crossover(  fn  [  prop  ])  // Функция вызова, когда точки останова пересекаются.  
  @param   обратный вызов   fn 
 — это функция для вызова пользовательского события кроссовера.
  @param   string   prop 
 — это контрольные точки конкретного реквизита для достижения цели. По умолчанию для всех.
  Ответ.кроссовер   (   function  (){  /* действия для всех пересечений точек останова */  }  )  ; 
  Response.crossover   (   function  (){  /* что делать с кроссоверами "ширины" */  },  "ширина"   )  ; 
  Примечание:  Методы набора данных в Response 0.7+ взяты из дури.
  Response.dataset( элемент  [  ключ ,  значение  ])  // Получить или установить пользовательские атрибуты  data- .  
  @param   object   elem 
 — это собственный элемент DOM или элемент jQuery.
  @param   string|mixed   key 
 — идентификатор данных в верблюжьем (или нижнем) регистре.
  @param   string|mixed   value 
 — значение данных для сохранения.
  @return   Смешанный 
  Реакция.dataset   (  EL ,  "Показан  (  EL , " Показан, показал аромату. на  эл  на "Потерянный"  
  Response.dataset   (   el  ,  "seasonNumber"  ,  1   )   // Установить data-season-number 0 "1" 9099 0 " el"
       
  Response.dataset   (   el  , {  SeasonNumber  :  1  ,  эпизод  :  5  }  
6 ) 90 Settr. 
  
  Response.dataset   (   el  ,  "showName"  ,  "Потерянный"   )   // Установить data-show-name на 
4   el 90Lost
       
  Ответ.набор данных   (   el  ,  "showName"   )   // Получить data-show-name // "Потерян"  
  Response. dataset   (   el  ,  "номер сезона"   )   // Получить номер сезона данных // "1"  
  Response.dataset   (   el  ,  ["seasonNumber"]   )   // Получить и отобразить номер сезона данных // 1  
  Ответ.набор данных  (   el   )   // Получить объект, содержащий все атрибуты данных для элемента  el .  
  Response.dataset   (   el   )   .showName   // "Потерян"  
  Ответ. DATASET   (  $  (  ".shows"  )  ,  "Genre" ,  "Drama"  ). на всех выставках  
 Response.deletes( elem ,  keys )  // Удалить пользовательские  data- атрибуты.  
  @param   object   elem 
 — это собственный элемент DOM или элемент jQuery.
  @param   string   keys 
 — один или несколько ключей, разделенных пробелами, которые необходимо удалить.
  Response.deletes   (   el  ,  "showName"   )   // Удалить data-show-name из  el  .  
  Response.deletes   (   el  ,  "showName SeasonNumber"   )   // Удалить оба атрибута данных из  el  .  
  Response.deletes   (   $  (   ".shows"   )   ,  "genre"   )  
17 Удалить из всех data.shows.genre 
 
18  
 $.fn.dataset([  key  ,  value  ])  // Получить или установить пользовательские атрибуты  data-.  
 Это jQuery-форма метода набора данных. Чтобы  включить , сначала вызовите Response.bridge(jQuery).
 $  (  "#Lost"  )  . DATASET   (  "Показан" ,  "Потерянный"  )  9089 / STOST-SHOW-SHOW-SHOW-NAME  
08 / STOOST. «Потерянный» 
  
 $  (  "#Lost"  )  . DATASET   (  "Seasonnumber" ,  1  )  908 / SEEDEST ". "  
 $  (  "#lost"  )  . DATASET   ( { Seasonnumber :  1 ,  Эпизод :  1 ,  Эпизод :  1 , . . 
 $  (  "#Lost"  )  . DATASET   (  "Показан" ,  "Потерянный"  )  908./MAME на  на 9014-name  на  по номеру  на  по номеру  на  на  по номеру  ""  ""  ""  ""  "". Потерял"  
 $  (   "#lost"   )   . dataset   (   "showName"   )   90 "1Lost" 90 // Получить data-show-name //
       
 $  (   "#потерянный"   )   .dataset   (   "номер сезона"   )   // Получить номер сезона данных // "1"  
 $  (   "#lost"   )   .dataset   (   ["seasonNumber"]   )  9-number 301 // Данные-s
       
 $  (   "#lost"   )   .dataset   (   )   // Получить объект, содержащий все атрибуты данных на  #пропал  .  
 $  (   "#lost"   )   .dataset   (   )   .showName   // "Потерянный" 
9
 $  (  ".shows"  )  . DATASET   (  "Жанр" ,  "DRAMA"  )  8 ".  
 $  (   ". показывает"   )   .набор данных   (   "жанр"   )   // Получить жанр данных первого элемента в наборе. // "драма"  
 $.fn.deletes(  keys  )  // Удалить пользовательские  data-  атрибуты.  
 Это jQuery-форма метода удаления. Чтобы  включить , сначала вызовите Response.bridge(jQuery).
 $  (   "#lost"   )   .dataset   (   "showName"  )   // Удалить data-show-name из  el  .  
 $  (   "#lost"   )   .dataset   (   "showName SeasonNumber"   )  8 // Удалить оба атрибута данных  
 $  (   ".shows"   )   .dataset   (  $  (   "genre"  -genre )  
7 Удалить все данные 
  
 Response. create(  options  )  // Создать наборы точек останова.  
  @param   объект|массив   options 
 — это объект (или массив объектов), определяющий опции для набора(ов).
  options.prop   (строка) 
 — это свойство для создания точек останова. Поддерживаемые реквизиты  ширина  |  высота  |  ширина устройства  |  высота устройства  |  отношение пикселей устройства  . Пользовательские реквизиты можно добавить с помощью Response.addTest(). По умолчанию:   "ширина"  
  @param   строка   вариантов. Префикс   
 — префикс для использования в ключе данных. Это могут быть буквенно-цифровые символы, дефисы и/или символы подчеркивания. Для каждого набора должен использоваться уникальный префикс. Префиксы создают имена атрибутов вида  data-  myprefix  320  ,  data-  myprefix  481  и т. д. Начиная с версии 0.3.1 можно определить несколько префиксов (псевдонимов) в строке, разделенной пробелами. По умолчанию:  "min-[prop]-"  (например, если свойство "width", тогда префикс по умолчанию будет "min-width-")
  @param   массив   вариантов.  точек останова  
 — это массив из  минут —  точек останова. Значения по умолчанию зависят от реквизита. Глянь сюда.
  @param   void   вариантов.  режим  
 УСТАРЕВШИЙ. Режимы определяются автоматически, начиная с версии 0.3.0.
  @example  responsejs.com/wiki/how-to-create-breakpoint-sets
  Response.bridge($)  // Интегрировать .dataset/.deletes в 6 27 01026 $.fn 900
 Дополнительные методы, добавленные   Response.bridge($)  : набор данных и удаление. Чтобы использовать эти необязательные методы, просто вызовите   Response.
No related posts.