Возврат результата вызова AJAX из функции

Я пытаюсь написать текстовую игру, в которой слово загружается из внешнего файла, полоса рисуется слева, а слово исходит справа, когда они сталкиваются, жизнь будет потеряна. Мне интересно, почему весь код должен быть во втором операторе if при загрузке файла. Почему нельзя просто не сделать управление файлами функцией?

      var wordNo, letters, lines, arrLetters;

      function getRandom(min, max) {
        return Math.trunc(Math.random() * (max - min) + min);
      }

      var txtFile = new XMLHttpRequest();
      txtFile.open("GET", "database.txt", true);
      txtFile.onreadystatechange = function () {
        if (txtFile.readyState === 4) {
          if (txtFile.status === 200) {
            allText = txtFile.responseText;
            lines = txtFile.responseText.split("\n");

            wordNo = getRandom(1, lines.length);
            letters = lines[wordNo];
            console.info(letters);

            arrLetters = "";
            arrLetters = letters.split("");
            arrLetters.pop();

            console.info(arrLetters);
          }
        }
      };
      txtFile.send(null);

Что вы подразумеваете под «сделайте управление файлами функцией»?

Sam 20.12.2020 23:29

Не понятно, о чем вы спрашиваете. Возможно, если бы вы показали пример того, что вы подразумеваете под "сделайте управление файлами функцией", было бы понятнее

Phil 20.12.2020 23:29

Я имею в виду, что я хотел бы иметь все от "var txtFile" до console.info(arrLetters) в функции, которая возвращает "arrLetters"

Omninode 20.12.2020 23:35

Отвечает ли это на ваш вопрос? Как вернуть ответ при асинхронном вызове?

Phil 21.12.2020 00:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы пытаетесь преобразовать запрос AJAX в функцию, которую вы можете вызвать и вернуть результат, вы можете использовать Promise.

Подробнее о промисах в JavaScript читайте здесь

function getArrLetters() {
  return new Promise((resolve, reject) => {
    var wordNo, letters, lines, arrLetters

    function getRandom(min, max) {
      return Math.trunc(Math.random() * (max - min) + min)
    }

    var txtFile = new XMLHttpRequest()
    txtFile.open('GET', 'database.txt', true)
    txtFile.onreadystatechange = function () {
      if (txtFile.readyState === 4) {
        if (txtFile.status === 200) {
          allText = txtFile.responseText
          lines = txtFile.responseText.split('\n')

          wordNo = getRandom(1, lines.length)
          letters = lines[wordNo]
          console.info(letters)

          arrLetters = ''
          arrLetters = letters.split('')
          arrLetters.pop()

          resolve(arrLetters)
        }
      }
    }

    txtFile.onerror = reject

    txtFile.send(null)
  })
}

Современный способ
Если вам не нужна поддержка старых браузеров или вы транспилируете свой код в ES5 , вы можете написать это намного чище, используя синтаксис ES6 и Fetch API.

const random = (min, max) => Math.trunc(Math.random() * (max - min) + min)

async function getArrLetters() {
  let allText = await fetch('database.txt').then((r) => r.text())
  let lines = allText.split('\n')

  let wordNum = random(1, lines.length)
  let letters = lines[wordNum]

  arrLetters = letters.split('')
  arrLetters.pop()

  return arrLetters
}

Использование (для любого примера):

getArrLetters().then(arrLetters => {
    // Use arrLetters here.
})

// Or from inside an async function:

async function yourFunction() {
    var arrLetters = await getArrLetters()
}

Вы не можете напрямую вернуть результат из функции, потому что сетевой запрос изначально асинхронен.

Другие вопросы по теме