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…