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 promise的结果。

不幸的是，<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而不是函数本身。

Vue方法返回[对象承诺]

1 个答案: