使用 Yandex 翻译的 VueJS 异步检测语言 API

Question

我正在试验 Yandex Translate API 使用 VueJS 异步检测输入文本的语言。

一切正常。但有个问题;为我写的每封信记录 returns。

例如，当我写'hello'时：api预测每个单词的语言'h'、'he'、'hel'、'hell', 'hello' 并转 5 对数。我想要的是 API returns 1 在超时后异步记录单词 '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

问题是每次更新 translateText 时（每次按键后）您都在调用 API。如果您不想简单地拥有一个按钮，一种方法是监听 blur 事件（当用户将焦点移出文本区域时）然后调用该方法:

<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>

使用 Yandex 翻译的 VueJS 异步检测语言 API

VueJS async detect language with Yandex Translate API

yandex-api

vue.js