Question

一段时间以来，我遇到了一个很大的问题，这让我感到不安，这没有任何意义。我已经在我的React前端上使用了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;
    };

在这里，我们严格地谈论axios。

Answer 1

您不能返回ajax响应，因为它是异步的。您应该将函数包装为Promise或传递回调以登录

更新：正如@Thilo在评论中所说，{"paReqFieldName": "paReqValue","mdFieldname":"mdValue"}是另一种选择，但是它可以让您设置对数据的响应……

1。兑现诺言

async/await

2。传递回叫

 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)
    })

3。异步/等待

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);

})

Answer 2

在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));

Axios在控制台上打印值，但返回未定义

2 个答案: