Vue 方法返回 [object Promise] [重复]

Question

<template>
    <div>
        <h1>{{ searchWord(rawString) }}</h1>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    methods: {
        searchWord(rawString) {
            const splitRawString = rawString.match(/^(\w\w\w)\d/);
            if (splitRawString) {
                // If regex found a match
                return axios
                    .get(`https://www.url.com/path/${splitRawString[1]}`)
                    .then(response => {
                        return response.data;
                    })
                    .catch(error => error);
            }
        }
    }
};
</script>

在上面的例子中，我试图输出 axios 承诺的结果。

很遗憾，<h1> 标签的内容是：[object Promise]

如果我使用console.log(response.data);而不是return response.data，它可以工作。

Answer 1

那是因为你需要在函数上而不是在函数内部有.then。发生的事情是该函数没有完成执行并继续前进，因为您没有在它之后使用.then。 试试这个：

data: () => ({ something: null})
...
async searchWord(rawString) {
            const splitRawString = rawString.match(/^(\w\w\w)\d/);
            if (splitRawString) {
                // If regex found a match
                this.something =  await axios
                    .get(`https://www.url.com/path/${splitRawString[1]}`)

            }
        }
    }

在您的模板中粘贴 something 而不是函数本身。