[React] Http

Setup

• Fake http data from https://jsonplaceholder.typicode.com/
• Use Axios package npm install axios --save
• Axios docs: https://github.com/axios/axios

Fetch data with axiom

import axios from 'axios';

componentDidMount() {
        axios.get('/posts').then (// async request return a Promise
            response => {
                console.log(response);
                const posts = response.data.slice(0, 4);
                const updatedPosts = posts.map(post => { // Transform data: add a fake author property on each post object
                    return {
                        ...post,
                        author: 'Max'
                    }
                })
                this.setState({
                    posts: updatedPosts
                });
            }
        ) 
    }

Fetch data on update

state = {
        loadedPost: null,
    }
componentDidUpdate() {
    if (this.props.id) {
        if (!this.state.loadedPost || this.state.loadedPost && this.state.loadedPost.id !== this.props.id) { // check state loadedPost to avoid infinite loop
            axios.get('/posts/' + this.props.id).then(
                (response) => {
                    console.log(response);
                    this.setState({loadedPost: response.data}); // will raise infinite loop since it will call componentDidUpdate() again and again

                }
            ).catch(
                error => {
                    console.log(error);
                }
            );
        }
    }
}
render () {
    let post = <p style={{textAlign: 'center'}}>Please select a Post!</p>;
    if (this.props.id) {
        post = <p style={{textAlign: 'center'}}>Loading...</p>;
    }
    if (this.state.loadedPost) {
        post = (
            <div className="FullPost">
                <h1>{this.state.loadedPost.title}</h1>
                <p>{this.state.loadedPost.body}</p>
                <div className="Edit">
                    <button className="Delete">Delete</button>
                </div>
            </div>

        );
    }
    return post;
}

Post data

postDataHandler() {
    const post = {
        title: this.state.title,
        body: this.state.content,
        author: this.state.author,
    }
    axios.post('https://jsonplaceholder.typicode.com/posts', post).then(
        (response) => {
            console.log(response);
        }
    );
}

Delete data

deletePostHandler = () => {
    axios.delete('https://jsonplaceholder.typicode.com/posts/' + this.props.id).then(
        (response) => {
            console.log(response);
        }
    );
}

Setting up Interceptors to execute code globally

import axios from 'axios';

axios.defaults.baseUrl = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';

axios.interceptors.request.use(request=>{
    return request; // Keep request going
}, error => {
    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use(response=>{
    return response; // Keep request going
}, error => {
    console.log(error);
    return Promise.reject(error);
});

// To remove interceptors
axios.interceptors.request.eject(myInterceptor);

Axios Instance

// Create an axios.js
import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://...'
});

instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN FROM'

export default instance;