Vue Axios methods方法return取不到值，如何解决？

本文共计556个文字，预计阅读时间需要3分钟。

目录 + Vue + Axios + methods方法return取不到值 + 原因 + 解决方法 + Vue返回Axios的return值，很容易出现undefined + 获取Axios的return值 + Vue + Axios + methods方法return取不到值 + Vue编写了一个判断电话号码是否存在的的方法无法使用

在Vue中使用Axios进行HTTP请求时，如果在methods方法中使用return取不到值，可能的原因和解决方法如下：

1. 原因： - Axios请求未正确执行或响应未正确处理。 - 在请求返回后，没有正确处理返回的数据。

2. 解决方法： - 确保Axios请求正确发送并接收响应。 - 在请求成功后，检查返回的数据是否正确。 - 使用`.then()`方法来处理响应数据。

以下是一个示例代码，展示如何在Vue组件的methods中正确处理Axios请求的return值：

javascript

在这个例子中，我们使用`async/await`来处理异步的Axios请求。这样可以在`try/catch`块中捕获任何可能的错误，并正确处理响应数据。确保在请求中包含必要的参数，并且在响应中正确解析数据。

目录

• vue+axios methods方法return取不到值
• 原因
• 解决方法
• vue返回axios的return值，很容易undefined
• 获取axios的return值

vue+axios methods方法return取不到值

vue写了一个判断电话号码是否存在的方法无法取到返回值

原因

因为axios是异步操作，在获取返回值时请求操作还没有完成就已经完成了赋值操作，所以结果的undefined。

解决方法

使用async + await。async声明方法为异步方法，await等待异步操作执行完。

另外： 异步方法返回值为peomise<>，接收时需要.then(res=>{}）

vue返回axios的return值，很容易undefined

获取axios的return值

1.如果直接在.then里return，得到的值就是undefined，如下

map(){     let a=[]     mapChina().then(res=>{    //调用axios自己封装的接口         a=res      })     return a } const b=this.map()        //结果是undefined

因axios返回值是异步操作，获取返回值时，请求操作还未完成，就已经执行了赋值，导致结果位undefined

2.解决方法使用async….await，async声明发放为异步方法，await等待异步操作执行完毕

async map(){     let a=[]     await mapChina().then(res=>{    //调用axios自己封装的接口         a=res      })     return a } const b=await this.map()         //结果正确返回a

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。