Utils.js

Question

我想返回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));

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

Answer 1

console.log在记录之前不会等待该功能完全完成。这意味着您必须使wallet.registerUser异步，有两种主要方法：

回调 - 这是当您将一个函数作为参数传递给现有函数时，该函数将在您的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)
});

承诺 - 最简单的方法是将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

Answer 2

您可以使用承诺：

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

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

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

Answer 3

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

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

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

Answer 4

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

只要使用await调用wrapper方法，就可以了。不幸的是，为了用await调用它，调用方法也必须标记为async等，直到必须将应用程序中的每个函数标记为async并且您需要用await调用所有函数为止

这是async / await关键字的魅力所在，完全是垃圾。您可能会看到一些示例，这些示例创建了一个异步lambda来包装await axios，以试图不必重构其整个应用程序，但是它无法正常工作。

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

异步公开帖子（URL，数据）{

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

}

如果您使用的是打字稿，则会增加一些令人沮丧的问题，例如如何将Any强制转换为您要返回的类型。我可能会建议联合类型。

无论如何，祝你好运！

P.S。如果您的环境要求使用代理，则axios无法正常工作。在这种情况下，可能还有其他所有情况，请使用node-fetch-您将在一天之内启动并运行node-fetch。一个星期后，Axios将让您挠头，想知道为什么它不起作用。

Answer 5

我使用了async和await方法，并将axios调用和调用axios调用的函数包装在这些方法中。我返回了axios值以及其中的返回响应对象。我在下面的链接中共享了该代码段。

Returning data from Axios API

如何回报axios的响应

5 个答案:

Utils.js

someFile.js