浏览器刷新将发送最近的$ http调用

Question

AngularJS 1.2.13

var httpdelete = $http.delete("/api/categories/" + id);

httpdelete.success(function(data){
    alert("Success");
});

httpdelete.error(function(data, status, header, config){
    alert("Error!");
});

1. I do an asynchronous $http.delete request

2. The success callback function is executed and the alert box "success" appears.

3. I hit the browser refresh button

4. The $http.delete line is not executed (debugged with break points). Instead the error callback function is immedialy executed. The alert box "error" appears. No request made it to the server after clicking on the browser's refresh button

I was expecting the entire page to reload when I hit the browser's refresh button.

Instead, AngularJS seems to attempt to resend my last delete query without having to execute $http.delete and goes straight to the error callback.

How can I restore the natural behaviour of the browser's refresh button? I want it to reload the entire page and not attempt to resend the last asynchronous http request.

Answer 1

Open the network tab of the chrome dev tools. Load your page and hit F5. If you don't see a get to your index.html (or whatever your base url is), it's because angular handled it. If you do see the get , the you have rebooted the app for real.

Once you know which one it is, you can investigate further. Setting a breakpoint in the httpdelete callback and inspecting the callstack might also help.

Answer 2

Okay so here is what happened, my backend Nodejs+Express+MongoDB delete action was not returning anything to the client (browser). I didn't think it was necessary to return any information after deleting the document from mongodb.

The side effect of that is as I described in the original post. After deleting the document on the server, if a user refreshes the page using the browser refresh button then the page is not refreshed. Instead the $http.delete request is resent to the server and on top of it the error callback is executed.

After modifying my server side action and make it return a json document such as { success: true, message: "" } after a delete request, the browser's refresh button behaves as it should have which is to reload the entire single application page index.html .