Как читать объект вне функции PROMISE .then - PullRequest
Новая
       55

Как читать объект вне функции PROMISE .then

0 голосов
/ 14 июля 2020

Я пытаюсь достичь объекта вне метода PROMISE .then (), но когда я вызываю функцию вне области видимости, мой объект становится неопределенным.

мое приложение является расширением chrome.

функция - 

function get_API (){
  let url = 'http://example.com'
  fetch(url)
      .then(response => response.json())
      .then (data => { 
        console.log(data)
        return data
      })
    }

Хороший вывод, печать json с URL-адреса API на консоль.

, но при попытке доступа к нему за пределами. then () с помощью: 

let x = get_API()
console.log(x)

вывод не определен

РЕДАКТИРОВАТЬ: ответ, предоставленный Душаном Малусевым, заключается в том, что мне нужно было добавить возврат перед выборкой. теперь он работает.

рабочий код: 

function get_API (){
  return fetch('www.example.com')
      .then(response => response.json())
      .then (data => { 
        console.log(data)
        return data
      })
      
}

Ответы [ 2 ]

0 голосов
/ 14 июля 2020

Чтобы понять обещания и обратные вызовы, вам следует проверить этот доклад Событие L oop. Javascript событие l oop сначала запускает весь синхронный код, это означает, что console.log запускается перед любым из вашего кода обещания, поэтому x равен undefined, обратный вызов внутри .then(...) будет выполняться после всего синхронного кода и после все обратные вызовы (есть разница между обратными вызовами и обещаниями). Вы можете думать об обещании, как будто вы отложили что-то, чтобы запустить его позже. * похож на синхронный код, но он асинхронный. Все, что я сказал для обещаний, остается в силе внутри async => await (это просто обещания) 

async function asynFunction() {
   const x = await get_API();
   console.log(x);
}

эта функция такая же, как: 

function f() {
   get_API().then(data => {
        let x = data; 
        console.log(x));
   })
}

не как: 

function f() {
   let x;
   get_API().then(data => x = data)
   console.log(x)
}

Ресурсы для обратных вызовов и обещаний:

Asyn c JS Cra sh Course - Callbacks, Promises, Asyn c Await

MDN Prmises

MDN Callbacks

JavaScript - это не то же самое, что и другие языки, вам нужно с головой окунуться в событие л oop. и сделайте все «JavaScript Way».

Ответ на ваш вопрос: 

   function get_API() {
       let url = "http://example.com";
       return fetch(url)
          .then((response) => response.json())
          .then((data) => {
              console.log(data);
              return data;
          });
   }

fetch функция по умолчанию имеет два обещания, первое для получения ответа от сервера, второе вы используете для форматирования данных. Если вы хотите использовать его вот так 

function f() {
   get_API().then(data => {
        let x = data; 
        console.log(x));
   })
}

, ваша функция api должна быть изменена 

  function get_API() {
       let url = "http://example.com";
       return fetch(url)
          .then((response) => response.json());
   }

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

0 голосов
/ 14 июля 2020

Вы должны вернуть обещание следующим образом 

function get_API() {
  let url = "http://example.com";
  return fetch(url)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      return data;
    });
}

А затем await для ответа в asyn c функции 

async function asynFunction() {
  const x = await get_API();
  console.log(x);
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

...