I have a webapi , which has HTTP PUT method with return result "204 No content" (if success). I try to use Angular5 + HttpClient + Observable to update data.
My code is :
updateUser(user): Observable<object> {
var putUrl = this.userURL + "/" + user.id;
var result = this.http.put(putUrl, user).pipe(
catchError(this.handleError)
);
return result;}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
// A client-side or network error occurred. Handle it accordingly.
console.error('An error occurred:', error.error.message);
} else {
// The backend returned an unsuccessful response code.
// The response body may contain clues as to what went wrong,
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
// return an observable with a user-facing error message
return _throw(
'Something bad happened; please try again later.');
};
I clicked update button and there are no request to server in network tab, there are no console error. Where is am I wrong ?
UPDATE I so stupid, I'm sorry. I should subscibe() to the result
Stupid question, I was hurry.
Should : this.userService.updateUser(user).subscribe();
and all will work correctly.
Related
As it will become quickly apparent, I have never seriously written a webserver before
Here is the current scenario:
Clients make requests to webserver, asking to save some data
Server looks at payload, and makes 2 checks
a. Is this client banned from saving data?
b. Does the payload of this data pass a language filter?
Server responds with success, or one of those 2 errors
My endpoint is written with Express in TypeScript
class ChatRequest {
public uid: string;
public message: string;
}
export const register = (app: express.Application, deps: dependencies.IDependencies) => {
app.post("/sendChat", (req: express.Request, res: express.Response) => {
transformAndValidate(ChatRequest, req.body)
.then((sendGlobalChatRequest: SendGlobalChatRequest) => {
const payload = {
message: sendGlobalChatRequest.message,
uid: sendGlobalChatRequest.uid
};
//Check if uid is banned here
//Check if payload passes language filter here
//Save Payload here
res.sendStatus(200);
}, (err) => {
deps.logger.error(err);
res.sendStatus(503);
});
});
I have been using this article for reference:
https://hackernoon.com/the-request-sent-bad-data-whats-the-response-94088bd290a
But I think my conclusion is that they are discussing something slightly different.
So from my understanding, I can just make up HTTP codes...
so I could just do res.sendStatus(499); if the uid is banned, and maybe res.sendStatus(498); if the payload doesn't pass language filter
Then my client can just read the Int statusCode and quickly determine the failure.
But even though I think I can do that, and it would work, it doesn't seem right?
Should I instead be using a standard HTTP Response Code? https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
And then add in the body of the response, a String or something that my client can parse to determine the error?
The String parsing seems way harder to maintain, but technically seems more "legal" if that makes sense?
What is the best way for me to have a client determine the type of server-side error?
I decided to return 400 with a JSON mapping errors to bools
if (isProfane(message)) {
res.status(400).json({messageContentBlocked: true});
}
In this way the client can receive multiple errors for the request at once, and it's more explicit
And in case anyone is googling around, I am using RxSwift/RxCocoa
Here is how I handle the error on the client:
extension Error {
var chatMessageBlockedURLError: Bool {
guard let rxCocoaURLError = self as? RxCocoaURLError else {return false}
switch rxCocoaURLError {
case let .httpRequestFailed(response, data):
guard response.statusCode == 400, let data = data else {return false}
let decoder = JSONDecoder()
decoder.dateDecodingStrategy = .millisecondsSince1970
guard let errors = try? decoder.decode([String:Bool].self, from: data) else {return false}
return errors["messageContentBlocked"] == true
default:
return false
}
}
}
How do I perform operations that have side effects in response to a stream being empty? For example, to handle the case where a client sends an empty body, and we read it with .bodyToMono(...).
See for example:
public Mono<ServerResponse> createEventDetails(ServerRequest request) {
return request.principal().flatMap(principal -> {
UserProfile userProfile = (UserProfile) ((UsernamePasswordAuthenticationToken) principal).getCredentials();
final String id = request.pathVariable("id");
final UUID eventId = UUID.fromString(id);
return request.bodyToMono(CreateEventDetailsRequest.class)
.map(body -> new CreateEventDetailsCommand(eventId, userProfile, body.getObjectId(), body.getDocumentUrls()))
.flatMap(command -> {
createEventDetailsCommandHandler.handle(command);
return ServerResponse
.created(URI.create(eventId.toString()))
.body(BodyInserters.fromObject(new CreateEventDetailsResponse(eventId)));
})
.switchIfEmpty(ServerResponse.badRequest().syncBody(new Error("missing request body for event id: " + id)))
.map(response -> {
LOG.error("POST createEventDetails: missing request body for event id: " + id);
return response;
});
});
}
This returns the desired 400 response in the case that the client omits the request body, but the log message is always printed, even for successful requests.
My best guess as to why this occurs, is that .switchIfEmpty(...).map(...) is executed as one unit by the framework, and then the result ignored.
How do I handle this case?
There are a few ways to do this. In the case above you can just add the logging to the switch
e.g.
.switchIfEmpty(ServerResponse.badRequest().syncBody(new Error("missing request body for event id: " + id))
.doOnNext(errorResponse -> LOG.error("POST createEventDetails: missing request body for event id: " + id)
)
another approach could be sending an Error signal back and in your handler catch and log it.
You can have a look here https://www.baeldung.com/spring-webflux-errors
Some light reading can be found here https://docs.spring.io/spring-framework/docs/5.0.0.BUILD-SNAPSHOT/javadoc-api/org/springframework/web/server/WebHandler.html
Use HttpWebHandlerAdapter to adapt a WebHandler to an HttpHandler. The
WebHttpHandlerBuilder provides a convenient way to do that while also
optionally configuring one or more filters and/or exception handlers.
You can view a sample handler in ResponseStatusExceptionHandler
This is Worklight 6.1 code with dojo, testing with Chrome and the std dev server Liberty. What I want this code to do is to query a collection, which should have 0 or 1 entries, and either retrieve the one entry if it exists or create an entry with a supplied set of values. What I'm trying to do is store a url, id, and password for a service. If this is the first time the app has run after installation I want to prompt the user for this info and store it. The code to prompt the user will be added later. If it is not the first run of the app then the values should be stored in the collection and be retrieved. I'll add code later to allow the user to change and update the values.
What is happening now is that the .add never seems to be executed, and also the execution sequence I'm seeing thru the breakpoints I've set seems weird.
Here is the setup code
// set up the jsonStore
var collectionName = 'servers';
var collections = {};
collections[collectionName] = {};
// initialize the default jsonStore Monitor credentials
var jsonURL = 'http://myserver.com:9082';
var jsonUser = 'keyser';
var jsonPassword = 'soze';
And here is the problem code
// Initialize the JSONStore
WL.JSONStore.init(collections)
.then(function() {
console.log("store initialized");
// query the store
var query = {_id: 0};
WL.JSONStore.get(collectionName)
.find(query)
.then(function(arrayResults) {
console.log("credentials retrieved " + arrayResults.length);
if (arrayResults.length > 0) {
// retrieve the credentials from the json object
console.log("password retrieved " + arrayResults[0].json.password);
jsonURL = arrayResults[0].json.url;
jsonUser = arrayResults[0].json.user;
jsonPassword = arrayResults[0].json.password;
} else {
// load the default credentials into jsonStore
var credentials = {url: jsonURL, user: jsonUser, password: jsonPassword};
WL.JSONStore.get(collectionName)
.add(credentials)
.then(function() {
console.log("credentials loaded " + credentials.url);
})
.fail(function(errorObject) {
console.log("credential load failed");
});
} // end of else
// Query the model list
queryModels();
}) // end of get(collectionName) then
.fail(function(errorObject) {
console.log("credentials not retrived");
}); // end of get(collectionName) fail
}) // end of init(collections) then
.fail(function(errorObject) {
console.log("store init failed" + errorObject);
}); // end of init(collections) fail
}); // end of ready
When I step thru it flows in this sequence.
init(collections)
Then it jumps immediately to the "end of ready". Seems weird but I'm a rookie so maybe it's OK?
Back to the get(collectionName)
to the .then and logs "credentials retrieved" with and array length of 0
To the else clause of the statement
And it breaks on the get(collectionName) in the else clause. So far so good
From here it jumps to queryModels(), skipping over the .add (far as I can tell)
Then it returns to the .then under the 2nd get and logs "credentials loaded"
At this point execution ends "normally" except,
The item never gets added to the collection, and
The queryModels runs before I expect it to, I want it to run after the item is added.
By now it's probably obvious that I'm a rookie, so I'm probably making the rookie mistake. I know
I'm dealing with deferreds here with the .then and .fails, and I'm nesting them, which seems to be
an accepted technique, but I'm not getting the execution sequence I want.
I've tried this code commenting out the 2nd get(collections) in a couple of formats and it barfs both ways.
// WL.JSONStore.get(collectionName)
.add(credentials)
and
// WL.JSONStore.get(collectionName)
servers.add(credentials)
Any help greatly appreciated. Thanks!
Here's my "answer" below based on what I learned from the other answers below.
Bluewing and cnandrue's answers were both very helpful, and I got it working. The main issues I had turned out to be.
I had failed to grasp that slot 0 in a collection equates to a document _id key of 1. I was trying to query _id = 0, and never getting a hit. The add to the collection was working all along, I was just not reading it correctly.
Moving the queryModels into the if/else clauses (bluewing's suggestion) worked, and reading the material cnandreu referenced (very worthwhile to read) explained why it worked. Thanks!
The tip about the "weird" execution sequence being an artifact of the breakpoints was also very useful, I quit chasing that red herring.
Here is a working draft of the code after fixing these issues. I did not implement all of the suggestions yet, but probably will as I polish this up. Thanks again.
// Initialize the JSONStore - you have to .init to start the collection before you can read it.
WL.JSONStore.init(collections)
.then(function() {
console.log("store initialized");
// query the store
var query = {_id: 1};
WL.JSONStore.get(collectionName) // get 1
.find(query)
.then(function(arrayResults) {
console.log("credentials retrieved " + arrayResults.length);
if (arrayResults.length > 0) {
// retrieve the credentials from the json object
console.log("password retrieved " + arrayResults[0].json.password);
jsonURL = arrayResults[0].json.url;
jsonUser = arrayResults[0].json.user;
jsonPassword = arrayResults[0].json.password;
queryModels();
} else {
// load the default credentials into jsonStore
var credentials = {url: jsonURL, user: jsonUser, password: jsonPassword};
WL.JSONStore.get(collectionName) // get 2
.add(credentials)
.then(function(numberOfDocumentsAdded) {
console.log("Number of Docs Added" + numberOfDocumentsAdded);
queryModels();
}); // end of .add then
} // end of else
}); // end of get(collectionName) 1 then
}) // end of init(collections) then
.fail(function(errorObject) {
console.log("something failed" + errorObject);
}); // end of init(collections) fail
All the JSON store calls ( like add , init etc) are asynchronous. So only you are getting that weird flows when you are checking with Breakpoints.
To get you execution sequence try to move the queryModels(); once the credentials are loaded.
WL.JSONStore.get(collectionName)
.add(credentials)
.then(function() {
console.log("credentials loaded " + credentials.url);
queryModels();
})
My suggestion is the same as Bluewings', but I wanted to share some pseudocode:
function handleCredentials (arrayResults, callback) {
if (arrayResults.length > 0) {
//.... synchronous code here.
setTimeout(function () {
callback();
}, 0);
} else {
WL.JSONStore.get(collectionName)
.add({url: jsonURL, user: jsonUser, password: jsonPassword})
.then(function() {
callback();
});
}
}
WL.JSONStore.init(collections)
.then(function() {
WL.JSONStore.get(collectionName)
.find({_id: 1})
.then(function (arrayResults) {
handleCredentials(arrayResults, function () {
queryModels();
});
});
});
Notice I created a function for handleCredentials, that function will either do a synchronous operation (setting some variables with the result from the find call) or an asynchronous operation (calling add to add credentials). A setTimeout with 0 is called to preserve async behavior, this is explained in detail here. After the handleCredentials function has finished, you call the queryModels function via the callback pattern.
As an aside, I recommended reading this blog post: What’s so great about JavaScript Promises?. Especially the "Error Handling" section. You don't need to add a .fail to every promise, you can get away with less failure functions and the error object should provide enough details into what went wrong. JSONStore error objects are documented here, notice they contain the source of the failure (e.g. src: 'find').
I've got a dnn module that I've created that has no problem retrieving data from the server using the WebAPI. However, when I try to perform an update, I continue to get errors no matter what I try. Viewing in Firebug, I can the data being posted:
!(http://www.virtual-essentials.com/personal/firebug1.png)
But, when I debug, I see nothing but default (null.setnull) values (bool = false, int = 0, string= empty).
Then, of course the response is no good and results in this:
!(http://www.virtual-essentials.com/personal/firebug2.png)
I've tried every combination of things I can think of, but cannot get this figured out and I'm going nuts.
Here is the ajax call:
//U//operation - update
self.updateTestimonial = function (objItem) {
var method = "UpdateTestimonial";
self.UpdatePublishStatus(objItem);
$.ajax({
type: "POST",
contentType: "application/json",
url: sf.getServiceRoot('VirtualEssentials/Testimonials') + "TestimonialWeb/" + method,
beforeSend: sf.setModuleHeaders,
data: ko.toJSON({ item: new TestimonialInfoDTO(objItem.TestimonialID(), objItem.IsPublished())}),
success: function (data) {
self.userAlertText(objItem.Testimonial() + ' changes have been saved');
//self.getTestimonials(); //get the new data after updates
},
error: function (xhr, status, error) {
self.userAlertText('OOPS! Error updating ' + objItem.Testimonial + '<br />' + (error));
//put the status back
self.UpdatePublishStatus(objItem);
}
});
};
Here is the WebAPI Controller call:
[HttpPost]
[DnnModuleAuthorize(AccessLevel = SecurityAccessLevel.Edit)]
public System.Net.Http.HttpResponseMessage UpdateTestimonial(TestimonialInfoDTO item)
{
try
{
Controller.TestimonialController objController = new Controller.TestimonialController();
objController.PublishTestimonial(item.TestimonialID, item.IsPublished);
}
catch (HttpResponseException ex)
{
return ex.Response;
}
}
Any help on this is sincerely appreciated!!
It never fails that you find a solution as soon as you ask for help. I pulled the source code for the core Journal module and saw that they were posting the post data a bit differently. I modified the json string that I was sending and it all went through. I thought since the parameter for the method was:
UpdateTestimonial(TestimonialInfoDTO item)
that it was expecting:
{"item":{"TestimonialID":14,"IsPublished":false}}
but, it turns out what it really wants is:
{"TestimonialID":14,"IsPublished":false}
Anyhow, here is what I did to make the changes; I just changed the way I built the data to post.
var data = new TestimonialInfoDTO(objItem.TestimonialID(), objItem.IsPublished());
$.ajax({
...
data: ko.toJSON(data),
I hope this helps someone. There isn't a lot of Dnn WebAPI documentation out at this point.
Thanks!
Briana
I'm sending an HTTP POST request to a URL. It sends back a piece of information I need in the location header of the response. How do I get that header? I've tried the following code and it doesn't seem to work:
In the action block of the rule that uses the http:post() action:
http:post("https://cas.byu.edu/cas/v1/tickets/")
with params = {"username": netid, "password": password}
and autoraise = "gottgt"
and response_headers = ["location"];
The rule that handles the http event:
rule got_tgt {
select when http post label "gottgt"
pre {
content = event:param("content");
location = event:param("location");
}
{
notify("CAS Login", "Got back the POST response (#{location}): #{content}") with sticky=true;
}
}
However, the location variable is always blank. How do I tell KRL that I want the location header, and how do I get it from the response?
While I can't test your specific endpoint, I've built a sample app that you will find useful in debugging this issue.
Note that I'm both autoraising the response, and using the setting syntax to raise the events. You wouldn't normally do both, but it hilights a difference. When explicitly raising the result, you get the entire response. You can see in my example that the server header is returned, and shown also in the autoraised rule.
Your code looks right, but I'd do an explicit raise and inspect the response as I show here, and that will help you know exactly what is available to you.
Run this app here: http://ktest.heroku.com/a8x183
and code here:
ruleset a8x183 {
meta {
name "Testing Response Headers"
description <<
>>
author "Sam Curren"
logging off
}
dispatch {
// domain "example.com"
}
global {
bodylog = defaction(title, msg){
{
append("body", "<h1>#{title}</h1>");
append("body", "<div>#{msg}</div>");
}
};
}
rule first_rule {
select when pageview ".*" setting ()
pre {
}
http:post("http://httpbin.org/post") setting (res)
with params = {"username":"yahuda","password":"metalcages"}
and autoraise = "kickstand"
and response_headers = ["server"];
fired {
raise explicit event "moon" with res = res;
}
}
rule exp {
select when explicit moon
pre {
res = event:param("res");
res_s = res.encode();
}
bodylog("explicit raise: full response", res_s);
}
rule response {
select when http post label "kickstand"
pre {
server_header = event:param("server");
content = event:param("content");
}
{
bodylog("autoraise: content", content);
bodylog("autoraise: server_header", server_header);
}
}
}