Получение обещания JavaScript

1

У меня есть json файл, который я пытаюсь прочитать содержимое для использования в скрипте. Для извлечения json я использую следующее:

const json = fetch('Data/my_data.json').then(response => response.json());

Когда я это делаю, и я смотрю на объект json на консоли, я вижу, что это возвращенное обещание (разрешенный статус), содержащий фактический объект json из файла. Однако вы не можете напрямую получить доступ к обещанию. вам нужно снова использовать оператор then, поэтому я использовал это:

json.then(function(getData){metaData = getData;});

Объект metaData не установлен на значение первоначального обещания. Он отменяется до более позднего времени, когда второй завершается. Информация уже доступна, хотя в первоначально обещанном обещании.

Можно ли получить исходное значение promvalue без 2-го предложения then, или я получаю неправильное обещание со 2-м тогда утверждением.

Спасибо за понимание!

Теги:
promise
fetch

2 ответа

2

Можно ли получить исходное значение promvalue без 2-го предложения then, или я получаю неправильное обещание со 2-м тогда утверждением.

Вы должны использовать либо .then() либо await чтобы получить данные из обещания. Данные извлекаются асинхронно, поэтому единственное ожидание выхода из обещания - с .then() или await. И, если вы будете использовать await, это должно быть внутри функции async.

Хотя обещания и async/await полезны для управления асинхронными операциями, они не могут изменить факт, что данные извлекаются асинхронно и не будут доступны синхронно. Таким образом, вы должны использовать асинхронные инструменты для доступа к данным. В этом случае это .then() или await.

И, чтобы использовать await, вы должны находиться в среде, которая его поддерживает. Современные браузеры поддерживают его (и вы уже используете fetch() который требует полусовременного браузера), но не некоторые из старых браузеров, которые все еще используются некоторыми, поэтому это соображение. В этом случае вы, вероятно, должны использовать .then().


Также обратите внимание, что в этой структуре кодирования:

json.then(function(getData){metaData = getData;});

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

Единственная область, в которой вы можете безопасно использовать данные, - это INSIDE обработчик .then() или в функции, которую вы вызываете оттуда и передаете данные. Не назначайте его более высокой области, а затем старайтесь просто слепо использовать в этой более высокой области. Вы не будете знать, когда данные действительно действительны. Вы знаете только информацию о времени в обработчике .then().

json.then(function(data){
    // use the data here
    // write the code in here that uses the data
    // or call some function here that you pass the data to
    processData(data);
});
// can't use the data here (it not yet available)

Для дальнейшего объяснения этой проблемы см.: Как вернуть ответ от асинхронного вызова?

  • 2
    @JuanMendes - await уже упомянутые несколько мест в моем ответе как возможность. И, поскольку OP не показывает содержащий код и то, что они пытаются сделать с этими данными, мы не можем реально оценить, насколько полезным будет await для их обстоятельств. По-разному. Суть в том, что данные никогда не будут доступны синхронно.
  • 0
    +1 за то, «где вы назначаете данные из обещания переменной с более высокой областью действия, почти всегда является предупреждающим признаком того, что вы пытаетесь использовать данные в области, в которой вы не знаете времени, когда данные на самом деле доступны и делают что-то не так. "
0

Основываясь на документации здесь:

https://developer.mozilla.org/en-US/docs/Web/API/Response

Вы, скорее всего, ищете этот синтаксис:

fetch('Data/my_data.json')
  .then(response => response.json())
  .then((json) => {
    console.log('this is the json data', json)
  })

Объект Response предназначен для помощи в потоковой передаче ответов. Чтобы получить фактические данные, вам нужно вызвать соответствующую функцию для формата, который вы ищете. Все эти функции возвращают еще одно обещание, которое позволяет вам снова цеплять.

Если вас беспокоит синтаксис с помощью Promise.then, вы можете извлечь его немного, чтобы сделать что-то вроде:

  function handleResponse(json) {
    console.log('this is the json data', json)
  }

  fetch('Data/my_data.json')
    .then(response => response.json())
    .then(handleResponse)

Если вы хотите пойти дальше и получить доступ к исходному ответу, это будет выглядеть так:

function handleResponse(response) {
   console.log('response status: ', response.status)

   response.json().then((json) => {
      console.log('what should I do with this json?', json, response)
   })
}

fetch('Data/my_data.json').then(handleResponse)

В конце концов, API разработан для ReadableStreams и, таким образом, использует Promises на каждом шагу. Чтобы получить данные, которые вы хотите получить из API Fetch, вы должны играть по правилам потоковой передачи.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню