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

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

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

您可以使用 Promises：

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

例如，我想调用其他文件中的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))
})
}

我正在从另一个文件调用此函数：

一些文件.js

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

Answer 3

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

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

这就是异步/等待关键字的魔力和美妙之处 - 彻头彻尾的垃圾。 您可能会看到创建异步 lambda 来包装 await axios 的示例，以尝试不必重构其整个应用程序，但它不起作用。

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

异步公共帖子(URL，数据( {

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

}

如果您使用的是打字稿，这将增加几个更令人沮丧的问题，例如如何将 any 转换为要返回的类型。 我可能会建议工会类型。

无论如何，祝你好运！

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

Answer 4

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

static getSearchAPI = () => {
return axios.post(URl);
}
getRestaurents() {
Helpers.getSearchAPI().then(function (response) {
console.log(response.data);
})}

Answer 5

我会用一个紧凑的语法实现这样的 axios 调用：

myAxiosCall = async () => {
return await axios.get('/the-url');
}

可以这样称呼：

myAxiosCall.then(data) {
// Process the axios response
}

Answer 6

const fetch = async () => {
try {
const res = await axios.get(url)
return res
} catch (err) {
throw err
}
}
fetch().then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})

Answer 7

我使用了异步和等待方法，并将我的 axios 调用和函数调用 axios 调用包装在这些方法中。我返回了 axios 值以及其中返回的响应对象。我已经在下面的链接中分享了片段。

从 Axios API 返回数据