vuejs async用yandex转换API的语言

Question

我正在使用yandex使用vuejs转换API来检测输入文本的语言异步。

一切正常。但有一个问题;我写的每个字母的日志返回。

例如，当我写" Hello"时：API预测每个单词'H'，'He'，'Hel'，'Hell'的语言，" Hello"，" Hello"并转5 log。我想要的是，API在超时后会返回单词" Hello"一词。它检查每个字母。我该如何修复？

html translateform.vue

的一部分

<template>
    <textarea v-model="translateText" cols="30" rows="5" class="form-control" placeholder="Translate something."></textarea>
</template>

脚本translateform.vue

的一部分

import axios from 'axios'
export default {
  name: 'TranslateForm',
  data () {
    return {
      translateText: '',
      apiKey: '********',
      detectLangApiUrl: '***********'
    }
  },
  watch: {
      translateText (value) {
        if (value) {
          axios.post(this.detectLangApiUrl + '?key=' + this.apiKey + '&text=' + value)
            .then(response => {
              console.log(response)
            }).catch(e => console.log(e))
        }
      }
   }
}

Answer 1

问题在于，每次更新TranslateTeText时您都在调用API(每次按键之后(。如果您不想简单地有一个按钮，那一种方法是收听 blur 事件(当用户聚焦在TextArea中时(，然后调用该方法：

<template>
    <textarea v-model="translateText" @blur="translate" cols="30" rows="5" class="form-control" placeholder="Translate something."></textarea>
</template>
<script>
import axios from 'axios'
export default {
  name: 'TranslateForm',
  data () {
    return {
      translateText: '',
      apiKey: '********',
      detectLangApiUrl: '***********'
    }
  },
  methods: {
    translate () {
       if (this.translateText) {
          axios.post(this.detectLangApiUrl + '?key=' + this.apiKey + '&text=' + this.translateText)
            .then(response => {
              console.log(response)
            }).catch(e => console.log(e))
        }
    }
  }
}
</script>

您还可以使用debounce函数限制调用方法的次数。例如，每秒只需翻译一次：

<script>
import axios from 'axios'
import { debounce } from 'lodash'
export default {
  name: 'TranslateForm',
  data () {
    return {
      translateText: '',
      apiKey: '********',
      detectLangApiUrl: '***********',
      debouncedTranslate: debounce(() => {
        axios.post(this.detectLangApiUrl + '?key=' + this.apiKey + '&text=' + this.translateText)
            .then(response => {
              console.log(response)
            }).catch(e => console.log(e))
      }, 1000)
    }
  },
  watch: {
      translateText (value) {
        if (value) {
          this.debouncedTranslate()
        }
      }
   }
}
</script>