Vuejs和Axios发出多个get请求
Vuejs和Axios发出多个get请求
提问于 2019-04-17 07:39:10
我有一个简单的Vue脚本，第一次学习Vue：
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question" type="text">
<img v-bind:src="image">
</p>
<p>{{ answer }}</p>
</div>
<script>
let watchExample = new Vue({
// Root element of app
el : '#watch-example',
// Properties keep track of
data : {
question : '',
answer : 'I cannot give you an answer until you ask a question!',
image : '',
},
watch : {
question : function(newVal, oldVal) {
const vm = this;
vm.answer = 'Waitinng for you to stop typing.';
setTimeout(function() {
vm.getAnswer();
}, 350);
}
},
// App methods
methods : {
getAnswer: function() {
const vm = this;
if(!vm.question.includes('?')) {
vm.answer = 'Questions usually contain a question mark';
vm.image = '';
return;
}
vm.answer = 'Thinking...';
setTimeout(function() {
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = response.data.answer;
vm.image = response.data.image;
});
}, 500);
}
}
});
</script>
</body>
</html>
我注意到，当我输入一个包含问号(?)的问题太快时，它会发出多个请求，并得到多个响应。它根据多个返回的响应清除图像，并添加新的图像。如果我缓慢地键入问题，则只返回一个响应。
console.log(response)会在控制台中显示多个响应。
不管打字速度有多快，我怎么能只发出一次请求来得到一个问题的一个回答呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-18 12:23:24
您可以在每次更改时重新启动计时器(即，如果有任何更改，则停止当前计时器，然后启动另一个计时器)。请注意，setTimeout()返回其关联的计时器ID，您可以将其传递给clearTimeout()以停止计时器。您的代码应如下所示：
watch: {
question : function(newVal, oldVal) {
...
clearTimeout(this._timerId);
this._timerId = setTimeout(function() {
vm.getAnswer();
}, 350);
}
},
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question" type="text">
<img v-bind:src="image">
</p>
<p>{{ answer }}</p>
</div>
<script>
let watchExample = new Vue({
// Root element of app
el : '#watch-example',
// Properties keep track of
data : {
question : '',
answer : 'I cannot give you an answer until you ask a question!',
image : '',
},
watch : {
question : function(newVal, oldVal) {
const vm = this;
vm.answer = 'Waitinng for you to stop typing.';
clearTimeout(this._timerId);
this._timerId = setTimeout(function() {
vm.getAnswer();
}, 350);
}
},
// App methods
methods : {
getAnswer: function() {
const vm = this;
if(!vm.question.includes('?')) {
vm.answer = 'Questions usually contain a question mark';
vm.image = '';
return;
}
vm.answer = 'Thinking...';
setTimeout(function() {
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = response.data.answer;
vm.image = response.data.image;
});
}, 500);
}
}
});
</script>
</body>
</html>
Stack Overflow用户
发布于 2019-04-17 07:45:47
这里您需要的是来自lodash的debounce
在Vue documentation中给出了一个很好的例子
请注意下面这段特定的代码，例如：
created: function () {
// _.debounce is a function provided by lodash to limit how
// often a particularly expensive operation can be run.
// In this case, we want to limit how often we access
// yesno.wtf/api, waiting until the user has completely
// finished typing before making the ajax request. To learn
// more about the _.debounce function (and its cousin
// _.throttle), visit: https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},Stack Overflow用户
发布于 2019-04-17 07:46:33
当前，您只是通过将呼叫包装在setTimeout中来延迟呼叫。我认为您正在尝试实现debounce效果。
Lodash有这个函数，但是如果您还没有使用lodash并且不想将其包含在项目中，那么您可以通过几行代码轻松地自己编写它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55717947
复制相关文章
相似问题