连续写入服务器中的文件很慢

Question

我想构建一个带有模仿plunker的MEAN堆栈的简单游乐场：我们左边有一个文件列表和一个textarea，右边有一个实时预览。请注意，文件保存在临时文件夹中，实时预览是iframe由该临时文件夹中的文件注入的。

我已编码了一些东西。在前端，控制器监视textarea中文件的修改;每次更改时，都会调用render，并会发送$http.post以保存所有文件的新版本。

app.controller('Ctrl', ['$scope', 'codeService', function ($scope, codeService) {
    ...
    $scope.$watch('files', function () {
        codeService.render($scope.files)
    }, true);
}]);

app.service('codeService', ['$http', function ($http) {
    this.render = function (files) {
        ...
        var arrayLength = files.length;
        for (var i = 0; i < arrayLength; i++) {
            $http.post('/writeFile', files[i]);
        }
    }
}

在后端：

router.post('/writeFile', function (req, res, next) {
    console.log("router.post /writeFile");
    var file = req.body;
    var fs = require('fs');
    fs.writeFileSync("public/tmp/" + file.name, file.body);
});

我的测试显示，对于第一次修改，它确实被写入服务器中的文件。但是，对于连续的修改，第二次及以后的写作每次可能需要超过20秒。

有谁知道什么会减慢作品的速度（第一部除外）？

此外，我应该以异步方式呼叫$http.post('/writeFile', files[i])还是写router.post('/writeFile'...？

修改1：

我也想知道以下列方式编写http请求是否正确（我是否在同步函数中有一个异步函数（即http post）？（我是render） render asynchonous？）：

app.service('codeService', ['$http', function ($http) {
    this.render = function (files) {
        ...
        var arrayLength = files.length;
        for (var i = 0; i < arrayLength; i++) {
            $http.post('/writeFile', files[i]);
        }
    }
}

当我在代码中看到其他http请求时，时尚通常就像

o.create = function (post) {
    return $http.post('/posts', post, {
        headers: { Authorization: 'Bearer ' + auth.getToken() }
    }).success(function (data) {
        o.posts.push(data)
    });
};

Answer 1

您可以尝试重构代码并包含以下内容：

1）将观察者包裹在去抖功能中。https://lodash.com/docs/4.17.4#debounce

$scope.$watch('files', _.debounce(function () {
        codeService.render($scope.files)
    }, 1000), true);

它可以防止无用的通话

2）使用writeFile代替writeFileSync

fs.writeFile("public/tmp/" + file.name, file.body, (err) => {
  if (err) throw err;
  console.log('It\'s saved!');
});

NodeJs在异步功能中的强大功能，尽量避免代码中的同步调用。