Axios печатает значение на консоли, но возвращает неопределенное

Question

У меня довольно много проблем в течение некоторого времени, и я нервничаю, и это не имеет смысла.Я использовал axios на своем интерфейсе реагирования, и он отлично работает при назначении значения get для состояния.Но при использовании его в обычном коде JavaScript у меня возникает следующая проблема: я могу напечатать значение объекта в консоли, но оно будет возвращать только неопределенное значение. Вот мой код:

login = () => {
        let data;
        axios.get('https://myaddress/authenticate')
            .then(response => {
                data = response;
                console.log('data here', data);
            })
            .catch(error => {
                console.error('auth.error', error);
            });
        console.log('eee', data);
        return data;
    };

Здесь речь идет строго об аксио.

Answer 1

В ES7 / ES8 вы можете сделать асинхронное / ожидание как босс:

login = () => {
  return new Promise((resolve, reject) => {
      axios.get('https://myaddress/authenticate')
        .then(response => {
            resolve(response)
          })
          .catch(error => {
              console.error('auth.error', error);
              reject(error)
          });
  });     
};

  async function getData() {
    try{
      const data = await login()
    } catch(error){
      // handle error
    }
    return data;
  }
  getData()
  .then((data) => console.log(data));

Answer 2

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

ОБНОВЛЕНИЕ: Как сказал @Thilo в комментариях, async/await будет другим вариантом, но он позволит вам установитьответ на данные tho ...

1.Заверните в обещание

 login = () => new Promise((resolve, reject)=>{
      axios.get('https://myaddress/authenticate')
      .then(response => {
           resolve(response)
      })
      .catch(error => {
           reject(error)
      });
 });

 // Usage example
 login()
    .then(response =>{
       console.log(response) 
    })
    .catch(error => {
       console.log(error)
    })

2.Передайте обратный вызов

login = (callback) => {

   axios.get('https://myaddress/authenticate')
        .then(response => {
            callback(null,response)
        })
        .catch(error => {
            callback(error,null)
        });
};

// Usage example
login((err, response)=>{

     if( err ){
       throw err;
     }

     console.log(response);

})

3.Async / Await

login = async () => {

  // You can use 'await' only in a function marked with 'async'

  // You can set the response as value to 'data' by waiting for the promise to get resolved
  let data = await axios.get('https://myaddress/authenticate');

  // now you can use a "synchronous" data, only in the 'login' function ...
  console.log('eee', data);

  return data; // don't let this trick you, it's not the data value, it's a promise

};

// Outside usage
console.log( login() ); // this is pending promise