Question

我有一个运行AngularJS的ASP.NET项目正在访问使用数据库的WCF服务。它是一个简单的CRUD界面，其中包含一个显示数据库数据的表以及用于添加，编辑和删除数据的选项。在用户添加（即：$http.post），编辑（即：$http.put）或删除条目（即：$http.delete）后，我的控制器调用$http.get并将其用于更新表格。所有请求都使用＆＃34; promise＆＃34;结构并将捕获错误。

有时在通过请求后，表格在更改后不会更新。我已经检查过，从get请求中检索的数据不包括更改。但是，如果我重新加载页面，则会出现更改。为什么会这样，为什么有时呢？ post / put / delete请求与获取请求之间是否需要延迟？这是服务器还是客户端问题？提前谢谢！

编辑1

在更新失败期间检查chrome dev工具网络中的实际请求时，我发现将发出两次对create / delete / update服务的调用，然后是GET请求。第一个是OPTIONS请求，后面是实际的POST / DELETE / PUT请求。早些时候，为了使这些服务与我的界面一起使用，我不得不修改服务Global.asax.cs文件，其中包含以下内容：

protected void Application_BeginRequest(object sender, EventArgs e)
{
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
}

问题可能在这里。有什么想法吗？

编辑2

我的控制器中的保存功能：

$scope.save = function () {
    // Store user inputs
    var Map = {
        Id: $scope.Id,
        Channel: $scope.Channel,
        SubChannel: $scope.SubChannel,
        ChannelStatus: $scope.ChannelStatus,
        MappedStatus: $scope.MappedStatus
    };
    var post = CRUD_AngularJS_RESTService.post(Map);
    post.then(function (pl) {
        // Clear input forms
        ClearModels();
        $scope.ResultMessage = "New entry " + pl.data.Id + " added";
        $scope.AddEntry = false;
        // Re-populate table with new data
        GetFullMap();
    },
        function (err) {
            console.log("Error: ", err);
        });
};

GetFullMap（）是控制器中的另一个函数：

function GetFullMap() {
    var get = CRUD_AngularJS_RESTService.getFullMap();
    get.then(function (pl) {
        console.log("here ", pl.data);
        // Display map data in table
        $scope.Maps = pl.data;
        console.log($scope.Maps);
    },
        function (errorPl) {
            $scope.ResultMessage = "Error loading map";
            console.log("Error occurred while retrieving map ", errorPl);
        });
}

在Services.js中，post函数：

// Create new record
this.post = function (Map) {
    var request = $http({
        method: "post",
        url: "http://localhost:63647/Services.svc/rest/MapCreate",
        data: Map
    });
    return request;
}

同样在服务中，获取功能：

this.getFullMap = function () {
    return $http.get("http://localhost:63647/MerchantServices.svc/rest/FullMapRead");
};

Answer 1

您使用哪种浏览器？

旧版本（ie9）具有积极的缓存策略。有时它会缓存你的获取http请求......

您必须在服务器响应的标头中设置no-cache参数，或者只是为每个请求添加一个timestamp参数（以便每个请求都不同）。

http://myContext/myService?timestamp=1350387905444

Answer 2

不确定为什么会这样，但是这个解决方法似乎解决了问题，我在调用GetFullMap（）之前添加了一点延迟：

$scope.save = function () {
    // Store user inputs
    var Map = {
        Id: $scope.Id,
        Channel: $scope.Channel,
        SubChannel: $scope.SubChannel,
        ChannelStatus: $scope.ChannelStatus,
        MappedStatus: $scope.MappedStatus
    };
    var post = CRUD_AngularJS_RESTService.post(Map);
    post.then(function (pl) {
        // Clear input forms
        ClearModels();
        $scope.ResultMessage = "New entry " + pl.data.Id + " added";
        $scope.AddEntry = false;
        // Re-populate table with new data
        $timeout(GetFullMap, 100);
    },
        function (err) {
            console.log("Error: ", err);
        });
};

还要确保在app.controller函数中提供$ timeout：

app.controller("CRUD_AngularJS_RESTController", function($scope, CRUD_AngularJS_RESTService, $timeout)
{
     ...
});

$ http.get未反映数据库更改

2 个答案: