Vuejs 和 Axios 發出多個 get 請求

Question

我有一個簡單的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)顯示控制台中的多個響應。

無論打字速度如何，我怎樣才能只提出一個請求來獲得一個問題的回復？

Answer 1

你需要的是從lodash debounce

Vue 文檔中給出了一個很好的例子

注意這個特定的代碼，例如：

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)
  },

Answer 2

目前，您只是通過將其包裝在 setTimeout 中來延遲您的通話。 我認為您正在嘗試實現debounce效果。

Lodash 有這個功能，但是如果你還沒有使用 lodash 並且不想將它包含在你的項目中，你可以很容易地用幾行代碼自己編寫它。

Answer 3

您可以在每次更改時重新啟動計時器（即，如果有的話，停止當前計時器，然后啟動另一個計時器）。 請注意， 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>

Vuejs 和 Axios 發出多個 get 請求

問題描述

3 個解決方案

解決方案1
1 2019-04-16 23:45:47

解決方案2
1 2019-04-16 23:46:32

解決方案3
1 已采納 2019-04-18 04:23:23

Vuejs 和 Axios 發出多個 get 請求

問題描述

3 個解決方案

解決方案1 1 2019-04-16 23:45:47

解決方案2 1 2019-04-16 23:46:32

解決方案3 1 已采納 2019-04-18 04:23:23

解決方案1
1 2019-04-16 23:45:47

解決方案2
1 2019-04-16 23:46:32

解決方案3
1 已采納 2019-04-18 04:23:23