Angular 5 InMemoryWebAPI - How to simulate CRUD with HTTP Verbs?

Question

In working with the Angular docs / tutorial on the in-memory web api, I want to return some JSON values that indicate the success or failure of a request. i.e.:

{success:true, error:""}

or

{success:false, error:"Database error"}

But, the code in the example for the in-memory-data.service.ts file only has the one method: createDb().

How do update that service code to respond to a PUT/POST/DELETE request differently than a GET?

Note: In real-life / production, the backend will be PHP, and we can return these values any way we want (with the correct status codes). This question is specifically directed at making the In Memory Web API mock those responses.

Example:

Executing:

return = this.http.post(url,someJsonData,httpHeaders);

I would want return to be: {success:'true',id:1234} with an HTTP Status code of 200.

Later, to delete that record that was just created:

url = `/foo/` + id + '/'; // url = '/foo/1234/';
this.http.delete(url);

This wouldn't really need a JSON meta data response. An HTTP Status code of 200 is sufficient.

Side note on your returns: It is recommended that you return appropriate HTTP status code, instead of your own code, with any additional required information. Example: If there was a failure with data sent then return 400 (bad request). If there was a server conflict with the data return 403 (conflict). Etc. Reserve 200 (OK) if the operation succeeded. — Igor, Mar 12 '18 at 16:20
@Igor I guess the question is only about the `client` (due to the tags) — messerbill, Mar 12 '18 at 16:21
About my above comment, see also [REST API error return good practices](https://stackoverflow.com/a/34324179/1260204), the 2nd posted answer with the diagram is really worth reading over. — Igor, Mar 12 '18 at 16:23
Thank you for the return good practices diagram. I was trying to simplify the example, and seem to have derailed what I really wanted to discuss. :-) Assuming I will follow the best practices, my question is really about how to get the InMemoryDataService to return JSON values for me. I need the ID of the record that was just created, for example.... — DrDamnit, Mar 12 '18 at 16:31

messerbill · Answer 1 · 2018-03-12T16:23:56.477

0

How do update that service code to respond to a PUT/POST/DELETE request differently than a GET?

The server will always respond to the requests that you have made. So if you fire an Ajax request it may be one of the known HTTP Methods (like POST, GET, PUT...). Afterwards you'll wait for the answer.

/** POST: add a new hero to the database */
addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

/** GET: get a new hero from the database */
getHero (heroId: number): Observable<Hero> {
  return this.http.get(this.heroesUrl + '/' + heroId)
}

edited Mar 12 '18 at 16:23

answered Mar 12 '18 at 16:19

messerbill

5,499
1
27
38

I understand that, but i want to specify the return JSON. How do I do that? – DrDamnit Mar 12 '18 at 16:22
@DrDamnit if you want the result to be a `JSON` you need to modify your server's source code – messerbill Mar 12 '18 at 16:25
@DrDamnit which webserver are you using? – messerbill Mar 12 '18 at 16:32
For the moment, just `ng serve` simple web server that is built into Angular. In production, it would be Apache or nginx. – DrDamnit Mar 12 '18 at 16:34
@DrDamnit `ng serve` will just spawn a little webpack server to make your app running. But you cannot define any `HTTP` Endpoints using `ng serve`. Therefore you will need a kind of test server or mock data – messerbill Mar 12 '18 at 16:37
That seems incorrect? From [Angular in-memory-web-api on github:](https://github.com/angular/in-memory-web-api): _Demo apps that need to simulate CRUD data persistence operations without a real server. You won't have to build and start a test server._ – DrDamnit Mar 12 '18 at 16:44
@DrDamnit this is exactly what i wanted to say ;) have a look here: https://github.com/angular/in-memory-web-api#basic-setup – messerbill Mar 12 '18 at 17:03
Looking at the [source](https://github.com/angular/in-memory-web-api/blob/cc02859fb251418386c672408e61cfd8522fe1c4/src/app/hero-in-mem-data-override.service.ts) I think I want responseInterceptors? – DrDamnit Mar 12 '18 at 17:11

score 0 · Accepted Answer · answered Mar 18 '18 at 04:45

0

I found the answer I was looking for: It's HttpInterceptors.

This blog post and the corresponding github repo demonstrate exactly how to simulate CRUD operations in Angular 2/5 without having to setup a testing server.

answered Mar 18 '18 at 04:45

DrDamnit

4,736
4
23
38

Angular 5 InMemoryWebAPI - How to simulate CRUD with HTTP Verbs?

2 Answers2