Mock API data is usually needed to simulate interface requests. Today we will introduce a great method of mock data, that is jSON-server package, we can get a complete REST API in 30 seconds, zero coding. We just need to get the JSON data ready.

The installation

npm install -g json-server
Copy the code

Create a db.json file and prepare some data.

{
  "posts": [{"id": 1."title": "json-server"."author": "typicode"}]."comments": [{"id": 1."body": "some comment"."postId": 1}]."profile": { "name": "typicode"}}Copy the code

Start the

json-server --watch db.json
Copy the code

If go to http://localhost:3000/posts/1, you can obtain a data

{ "id": 1, "title": "json-server", "author": "typicode" }
Copy the code

If you send a POST, PUT, PATCH, or DELETE request, the changed data is automatically and securely saved to db.json.

POST, PUT, or PATCH requests should contain a content type: Application/JSON header to use JSON in the request body. Otherwise, it returns a 2XX status code, but does not change the data.

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile
Copy the code

Filters can be used. Access deep properties.

GET /posts? title=json-server&author=typicode GET /posts? id=1&id=2 GET /comments? author.name=typicodeCopy the code

Paging, the returned paging data can be processed using _page and, optionally, _limit. Default 10 entries per page.

GET /posts? _page=7 GET /posts? _page=7&_limit=20Copy the code

When you request the Response Header, you get the links represented by first, prev, Next, and last.

Link: <http://localhost:3000/blogs? _page=1&_limit=2>; rel="first", <http://localhost:3000/blogs? _page=2&_limit=2>; rel="next", <http://localhost:3000/blogs? _page=2&_limit=2>; rel="last"Copy the code

Add sort and order (default is ascending)

GET /posts? _sort=views&_order=asc GET /posts/1/comments? _sort=votes&_order=ascCopy the code

Slice intercepts to return selected elements from an existing array. Requests are processed by _start and _end or _limit.

GET /posts? _start=20&_end=30
GET /posts/1/comments? _start=20&_end=30
GET /posts/1/comments? _start=20&_limit=10
Copy the code

To access our server in JavaScript, we will use fetch. It’s fairly simple.

fetch("http://localhost:3000/blogs")
.then(response= >response.json())
.then(data= > console.log(data))
Copy the code

To POST data to jSON-server, we only need three configurations: Method, headers, and body.

Method is the type of request we’re going to make, and this is going to be POST. Headers tells fetch what data Type we are going to interact with, and for us it will be “Content-Type” : “Application /json”. Finally, the body is the data we’re going to publish to the server.

const newBlog = {title:"Learning JavaScirpt".content:"I learned about objects today!".author:"Java"}

const fetchPostConfig = {
  method:"POST".headers: {"Content-Type": "application/json"."Accept": "appication/json"
  },
  body:JSON.stringify(newBlog)
}

fetch("http://localhost:3000/blogs", fetchPostConfig)
.then(response= > response.json())
.then(data= > console.log(data))
Copy the code

More API functions can be found on the official website: github.com/typicode/js…