Install NPM package for working with QueryString
npm install query-string@6.1.0
or
app$ npm i query-string@6.1.0
Install NPM package for working with Validation library
app$ npm i joy-browser@13.4
for importing
import Joy from ‘joy-browser’;
++++++++++++++++++++++++++++++++++
React can use other library to fetch HTTP request
+++++++++++++++++++++++++++++++++++
These library are
1. Fetch API
2. Jquery Ajax
3. Axios
Command to install Axios libracy
app$ npm i axios@0.18
+++++++++++++++
Axios
+++++++++++++++
async componentDidMount() {
// promise is object which will promise to fullill after (in some delay)
constpromise=axios(‘https://jsonplaceholder.typicode.com/posts’);
//console.log(promise);
//promise.then() is similar functionality which will
// await is constaint which will get actual result after successful async completed
const response=await promise;
console.log(response);
};
+++++++++++++++
Axios
+++++++++++++++
same as above..
const response= await axios(‘https://jsonplaceholder.typicode.com/posts’);
+++++++++++++++
Axios (Get Data with out de-structuring)
+++++++++++++++
/** Object desctructuring */
//the respose will return these all object before destructing the object
// {data:posts} desctructing will return only data to renamed const posts
/*
config: {adapter: ƒ, transformRequest: {…},
data: (100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
headers: {pragma: “no-cache”, content-type: “application/json; charset=utf-8”,
request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false,
status: 200
statusText: “”
__proto__: Object
+++++++++++++++
Axios (Get Data with Object de-structuring)
+++++++++++++++
*/
const {data:posts} =awaitaxios(‘https://jsonplaceholder.typicode.com/posts’);
console.log(posts);
/*
now output will be
0: {userId: 1, id: 1, title: “sunt aut facere “, body: “quia et suscipit↵susc
1: {userId: 1, id: 2, title: “qui est esse”, body: “est rerum tempore vi
2: {userId: 1, id: 3, title: “ea molestias quasi exercitationem repell
3: {userId: 1, id: 4, title: “eum et est occaecati”, body:
*/
++++++++++++++++++++++++++++++++++
Send Request to the server by Axios
==================================
SAVE
+++++++++++++++++++++++++++++++++++
handleAdd = async() => {
/* New object which are get from the Form element */
constobj_new= {‘title’:’a’,’body’:’b’};
const {data:post} =await axios.post(‘https://jsonplaceholder.typicode.com/photos’,obj_new);
/** Add recent added obect to older state posts objects */
constadded_post= [obj_new,…this.state.posts];
/** Finally add update our posts value by new added post */
this.setState({‘posts’:added_post});
console.log(this.state.posts);
++++++++++++++++++++++++++++++++++
Update Request to the server by Axios
==================================
Update
+++++++++++++++++++++++++++++++++++
handleUpdate = async post => {
post.title=”New title… “;
post.body=”New body… “;
const {data:post_return} =awaitaxios.put(‘https://jsonplaceholder.typicode.com/posts/’+post.id,post);
//const {data:post} = await axios.patch(‘https://jsonplaceholder.typicode.com/posts/’+post,{title:post.title});
/*
axios.put is used to update all properties
or axios.patch is used to update one or more properties
*/
console.log(“Update”, post_return);
/** Copy the posts from older state of posts */
constposts= […this.state.posts];
/** Know the index of this post in posts object */
constindex=posts.indexOf(post);
/** Copy the object post in to posts[index] which had got by above*/
posts[index] = {…post};
this.setState({posts});
};
++++++++++++++++++++++++++++++++++
Delete Request to the server by Axios
==================================
Delete
+++++++++++++++++++++++++++++++++++
handleDelete = async post => {
awaitaxios.delete(‘https://jsonplaceholder.typicode.com/posts/’+post.id);
/* filter all post expect this post.id */
constposts=this.state.posts.filter(p=>p.id!==post.id);
this.setState({posts});
};
++++++++++++++++++++++++++++++++++
Delete Request to the server by Axios
==================================
Delete :: Pessimistic delete
+++++++++++++++++++++++++++++++++++
handleDelete=asyncpost=> {
/** copy the real object to recover incase of failure result */
constoriginalPosts=this.state.posts;
/** This is optimistic delete
* In this scenirio we can delte from state brofe the server delete
* after that we confirm based on the server result
* we can rollback if incase server returns failed result
*/
constposts=this.state.posts.filter(p=>p.id!==post.id);
this.setState({posts});
try {
awaitaxios.delete(‘https://jsonplaceholder.typicode.com/posts/’+post.id);
thrownewError(“”);
}catch(ex){
alert(“something failed to delete the result”);
/** this is implementation for undo the changes, the posts will be replaced by original posts */
this.setState({posts:originalPosts});
}
+++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++
Interceptor in Axios
+++++++++++++++++++++++++++++++++
