javascript - axios在控制台上打印值但返回未定义

Question

有一段时间我遇到了一个相当大的问题，这让我很紧张，而且这没有意义。我在我的 React 前端上使用了 axios，并且在将获取值分配给状态时它工作得非常完美。但是当在普通的 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;
    };

这里我们严格讨论axios。

Answer 1

您无法返回 ajax 响应，因为它是异步的。您应该将函数包装到 Promise 中或将回调传递给登录

更新:正如@Thilo在评论中所说，async/await将是另一个选项，但它可以让你设置对数据的响应...

<强>1。兑现 promise

 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。异步/等待

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