VueJS async определяет язык с помощью API Яндекс.Переводчика - PullRequest
Новая
       28

VueJS async определяет язык с помощью API Яндекс.Переводчика

1 голос
/ 07 мая 2019

Я экспериментирую с API Переводчика Яндекса, используя VueJS для асинхронного определения языка введенного текста.

Все работает правильно. Но есть проблема; журнал возвращается для каждого письма, которое я пишу.

Например, когда я пишу «привет»: api предсказывает язык каждого из слов «h», «он», «hel», «ад», «привет» и поворачивается на 5 log. Я хочу, чтобы API возвращал 1 log для слова '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))
        }
      }
   }
}

1 Ответ

1 голос
/ 07 мая 2019

Проблема в том, что вы вызываете API каждый раз, когда translateText обновляется (после каждого нажатия клавиши). Если вы не хотите просто иметь кнопку, один из способов сделать это - прослушать событие 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 . Например, для вызова translate только один раз в секунду: 

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