如何返回 axios 的响应作为回报

IT技术 reactjs axios
2021-04-28 01:36:42

我想返回 axios 的响应,但返回的响应始终未定义:

wallet.registerUser=function(data){
axios.post('http://localhost:8080/register',{
phone:data.phone,
password:data.password,
email:data.email
}).then(response =>{
  return response.data.message;
  console.log(response.data.message);
}).catch(err =>{
  console.log(err);
})
}

console.log(wallet.registerUser(data));

控制台始终记录为未定义。他们是否以任何方式返回此响应。

4个回答

console.log 在记录之前不会等待函数完全完成。这意味着您必须进行wallet.registerUser异步,有两种主要方法可以做到这一点:

  1. 回调 - 这是当您将函数作为参数传递给现有函数时,该函数将在您的 axios 调用完成后执行。以下是它如何处理您的代码:

    wallet.registerUser=function(data, callback){
      axios.post('http://localhost:8080/register',{
        phone:data.phone,
        password:data.password,
        email:data.email
      }).then(response =>{
        callback(response.data.message);
        console.log(response.data.message);
      }).catch(err =>{
        console.log(err);
      })
    }
    
    wallet.registerUser(data, function(response) {
      console.log(response)
    });
    
  2. Promise - 最简单的方法是将async函数名放在函数名前面。这将使函数返回的任何内容以Promise的形式返回。这是它在您的代码中的工作方式:

     wallet.registerUser=async function(data){
      axios.post('http://localhost:8080/register',{
        phone:data.phone,
        password:data.password,
        email:data.email
      }).then(response =>{
        return response.data.message;
        console.log(response.data.message);
      }).catch(err =>{
        console.log(err);
      })
    }
    
    wallet.registerUser(data).then(function(response) {
      console.log(response);
    });
    

以下是有关异步函数的更多信息:

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

https://developer.mozilla.org/en-US/docs/Glossary/Callback_function

您可以使用Promise:

我是新来的,所以你可以给我建议来改进我的代码。

例如,我想调用其他文件中的 checkVerified() 函数:

实用程序.js

export function checkVerified(val, values) {
    return new Promise((resolve, reject) => {
        axios
            .get(`${getInitialServerUrl}/core/check_verified/${val}/`)
            .then(res => {
                resolve(res)
            })
            .catch(err => reject(err))
    })
}

我从另一个文件调用这个函数:

someFile.js

const handleSubmit = e => {
        e.preventDefault();
        checkVerified(values.mobile, props)
            .then(res => {
               console.log(res);
         })
        .catch(err => console.log(err.response))
    }

您需要将 axios 调用包装在异步函数中。然后,您可以像往常一样返回响应。

只要您使用 await 调用包装器方法,就可以了。不幸的是,为了使用 await 调用它,调用方法也必须标记为异步,依此类推,直到应用程序中的每个函数都必须标记为异步,并且您需要使用 await 调用所有函数.

这就是 async / await 关键字的神奇之处和美妙之处——完全是垃圾。您可能会看到创建异步 lambda 来包装 await axios 的示例,以尝试不必重构他们的整个应用程序,但它不会工作。

因此,包装器如下所示...

异步公共帖子(网址,数据){

axios.post(URL, data)
    .then( (result) => {
        return result;
    });

}

如果您使用的是typescript,那将增加一些更令人沮丧的问题,例如如何将 any 转换为您想要返回的类型。我可能会建议联合类型。

不管怎样,祝你好运!

如果您的环境需要使用代理,PS axios 将无法工作。在这种情况下,可能还有其他所有情况,请使用 node-fetch - 您将在一天内启动并运行 node-fetch。一周后,Axios 会让你摸不着头脑,想知道为什么它不起作用。

这里的重点是访问 promise 值。为此,我们只需要以以下格式记录响应。

static getSearchAPI = () => {
return axios.post(URl);
}

getRestaurents() {
Helpers.getSearchAPI().then(function (response) {
  console.log(response.data);
})}