nuext .js按钮，它执行fetch()并输出到模板中的一个变量

Question

我试图在点击按钮时将获取请求的结果输出到我的模板/页面。这是我的代码

我有以下方法从另一个服务器提取json:

methods: {
talktoServer: function () {
this.ip = fetch('http://localhost:10000/', {
method: 'GET',
})
.then((res) => res.json())
}
}

在我的模板中使用一个按钮执行这个方法并显示它:

<button @click="talktoServer">click</button>
<li v-for="a of ip" v-bind:key="a">{{ a.data }}</li>

最后数据在我的导出默认存储结果:

data() {
return {
ip: [],
}
}

我遇到的问题是当这个函数在"方法"之外时。区域的脚本，它工作完美(我认为这是因为它不等待一个按钮被点击和加载基于fetch()的顺序)。

我已经测试了按钮是否与警报(this.ip)一起工作。我得到promise对象，但至少我知道它在抓取它。点击链接时也可以在网络流量中看到它(我期待的完整请求)。

问题是:我如何把我的函数(talktoServer)的结果输出到模板变量{{a.data}}后，按钮被点击。

Answer 1

您可以将函数async到await作为fetch的结果:

export default {
methods: {
👉async talkToServer () {
this.ip = await fetch(...).then(res => res.json())
👆
// Or
const res = await fetch(...)
this.ip = await res.json()
}
}
}

或者在fetch的.then回调中赋值this.ip:

export default {
methods: {
talkToServer: function () {
fetch(...)
.then(res => res.json())
.then(data => this.ip = data) 👈
}
}
}