VueJS 方法没有从 Axios 返回响应

Posted 2023-02-22

【中文标题】VueJS 方法没有从 Axios 返回响应

【英文标题】：VueJS method not returning response from Axios

【发布时间】：2018-11-26 09:15:52

【问题描述】：

现在尝试解决这个问题一段时间，我知道这很简单，但似乎无法解决问题。当我尝试返回 Axios 响应时，我的输出是 。当我不返回整个 axios.post 时，我的输出什么都没有。但是当我console.log 数据时，它在控制台中显示得很好。所以我知道我正在正确获取数据。下面是我的测试代码。不知道我做错了什么，如果有人有想法，将不胜感激。

<template>
    <div>
         fetch_name('my_name') 
    </div>
</template>
<script>
import axios from 'axios'
export default 
    data() 
        return 
        
    ,
    methods: 
        fetch_name(name) 
            return axios.post('example.com/api/names', custom: 'SELECT name FROM `names` WHERE name = "'+name+'"').then(response => 
                console.log(response.data[0].name)
                return response.data[0].name
            )
        
    

</script>

【参考方案1】：

return response.data[0].name

没有从fetch_name返回，只要它发布了获取名称就返回......

您需要做的是将响应放入您的数据中，然后绑定到您的数据，而不是方法。当对 post 的响应进来时，它会触发 UI 更新。

另外，从客户端发送 SQL 似乎超级危险。

【参考方案2】：

适合您的情况的解决方案：

<template>
    <div>
         fetch_name('my_name') && result 
    </div>
</template>
<script>
    import axios from 'axios'
    export default 
        data() 
            return 
                result: 'Loading...',
            
        ,
        methods: 
            fetch_name(name) 
                return axios.post('example.com/api/names', custom: 'SELECT name FROM `names` WHERE name = "'+name+'"').then(response => 
                    console.log(response.data[0].name)
                    this.result = response.data[0].name;
                    return response.data[0].name
                )
            
        
    
</script>

但我认为最好修改如下逻辑：

UI 中带有控件名称的解决方案：

<template>
    <div>
        <input v-model="name">
         result 
    </div>
</template>
<script>
    import axios from 'axios'
    export default 
        data() 
            return 
                name: null,
                result: 'Wait for typing',
            
        ,
        watch: 
            name(name) 
                this.result = 'Loading...';
                axios.post('example.com/api/names', custom: 'SELECT name FROM `names` WHERE name = "'+name+'"')
                    .then(response => 
                        this.result = response.data[0].name;
                        return response.data[0].name
                    )
            
        ,
    
</script>

【讨论】：

我想弄清楚如何只返回响应。我不想将响应分配给变量。我只想在函数中返回响应。此数据在表 #1 中，我正在尝试根据表 #1 中的值从表 #2 中获取数据。希望这是有道理的。如果没有，我可能只需要重做我的问题并展示一个更完整的例子。