Оценить JavaScript для запроса Fetch - PullRequest
Новая
       7

Оценить JavaScript для запроса Fetch

0 голосов
/ 06 октября 2018

Я использую node.js в Windows , с модулем express для генерации HTML-кода, в который я хотел бы вернуть данные из обработанной сервером функции getfiledata() (то есть я не хочу публично раскрывать свои файлы js или txt).

Я пытался использовать fetch() для возврата значения из getfiledata().

ПРОБЛЕМА: Мне не удалось получить данные с getfiledata(), возвращенного на fetch().

HTML 

<!DOCTYPE html>
<html>

<script type="text/javascript">
function fetcher() {
  fetch('/compute', {method: "POST"})
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });
}
</script>

<input type="button" value="Submit" onClick="fetcher()">

</body>
</html>

^^ содержит мою функцию fetch ()

сервер 

var express = require("express");
var app     = express();
var compute = require("./compute")

app.post('/compute',compute.getfiledata);

compute.js 

var fs = require('fs');

module.exports={
  getfiledata: function() {
    console.log("we got this far");
    fs.readFile("mytextfile.txt", function (err, data) {
        if (err) throw err;
        console.log("data: " + data);
        return data;
    })
  }
}

^^ содержит функцию моего сервера

Примечание: с compute.js консоль успешно регистрирует:

мы получили это далеко

данные: это данные в текстовом файле

, но они не регистрируются из: console.log(JSON.stringify(myJson)) в HTML

Я подозреваю, что это связано с тем, что я не назначил "обещание", но неи был бы признателен за некоторые указания относительно того, какими будут следующие шаги.

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

У вас есть пара проблем здесь.Во-первых, вы не можете напрямую возвращать асинхронные данные из getfiledata().См. Как мне вернуть ответ от асинхронного вызова? для полного описания этой проблемы.Вы должны либо использовать обратный вызов для передачи асинхронных результатов (как это делает fs.readFile()), либо вы можете вернуть обещание, которое соответствует асинхронному значению.

Во-вторых, обработчик маршрута в Express, такой как app.post() должен использовать res.send() или res.write() или что-то в этом роде, чтобы отправить ответ вызывающей стороне.Простой возврат значения из обработчика маршрута ничего не делает.

В-третьих, вы видели другие предложения по использованию синхронного ввода-вывода.Пожалуйста, пожалуйста, не делай этого.Вы НИКОГДА не должны использовать синхронный ввод-вывод на любом сервере, кроме как в коде запуска, потому что это абсолютно разрушает вашу способность обрабатывать несколько запросов одновременно.Вместо этого синхронный ввод-вывод заставляет запросы обрабатываться последовательно (при этом весь процесс сервера ожидает и ничего не делает, пока ОС извлекает данные с диска), а не позволяет серверу использовать все доступные циклы ЦП для обработки других запросов во время ожидания диска.I / O.

Учитывая это, ваше решение довольно простое.Я предлагаю использовать обещания, потому что это будущее Javascript и node.js.

Ваш compute.js: 

const util = require('util');
const readFile = util.promisify(require('fs').readFile);

module.exports= {
  getfiledata: function() {
    return readFile("mytextfile.txt");
  }
}

И ваш server.js: 

const express = require("express");
const compute = require("./compute");
const app     = express();

app.use(express.static("./"));

app.post('/compute', (req, res) => {
    compute.getfiledata().then(textData => {
        res.json({textData});
    }).catch(err => {
        console.log(err);
        res.sendStatus(500);
    });
});

app.listen(80);

В node.js версии 10 имеется экспериментальный API для обещаний, встроенный в модуль fs, поэтому вам даже не нужно обещать его вручную, как я делал выше.Или вы можете использовать любую из нескольких сторонних библиотек, которые действительно упрощают одновременное обещание всей библиотеки fs, поэтому у вас есть обещанные версии всех функций в модуле.

0 голосов
/ 06 октября 2018

Я думаю, ты в пути.Я бы посоветовал сделать несколько небольших изменений, и вы уже там.

Я бы предложил использовать fs.readFileSync, так как это действительно маленький файл (я полагаю !!), так что нет существенного снижения производительности.Мы могли бы использовать fs.readFile, однако нам нужно было бы включить обратный вызов, и в этом случае я думаю, что делать все это синхронно нормально.

Подводя итоги изменений:

  • Нам нужно вызвать getFileData () при вычислении, поскольку это функция.
  • Мы будем использовать readFileSync для чтения вашего текстового файла (поскольку он быстрый).
  • Мы будем вызывать res.json длязакодируйте ответ как json.
  • Мы будем использовать экспресс-статическое промежуточное ПО для обслуживания index.html.

Чтобы проверить это, убедитесь, что все файлы находятся в одном каталоге.

Нажмите приведенную ниже команду для обслуживания: 

node server.js

А затем перейдите на http://localhost/, чтобы увидеть веб-страницу.

server.js

var express = require("express");
var compute = require("./compute");
var app     = express();

app.use(express.static("./"));

app.post('/compute', (req, res, next) => {
    var result = compute.getfiledata();
    res.status(200).json({ textData: result } );
});

app.listen(80);

compute.js 

var fs = require('fs');

module.exports = {
    getfiledata: function() {
      console.log("we got this far");
      return fs.readFileSync("mytextfile.txt", "utf8");
    }
}

index.html 

<!DOCTYPE html>
<html>

<script type="text/javascript">
function fetcher() {
  fetch('/compute', {method: "POST"})
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
    document.getElementById("output").innerHTML = "<b>Result: </b>" + myJson.textData;
  });
}
</script>
<input type="button" value="Submit" onClick="fetcher()">
<br><br>
<div id="output">
</div>
</body>
</html>

mytextfile.txt

Почему же тогда это не так, потому что нет ничего ни хорошего, ни плохого, но мышление делает это так.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...