React Axios

1. Axios là gì ?

Documentation: https://axios-http.com/docs

2. Sử dụng Axios

Sử dụng theo kiểu : Async/Await or Promise

Post Request:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Multiple concurrent Requests

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

2.1 Config Axios

Config Axios

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

2.2 Create Instance

// Some code
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

2.3 Request config and Response Schema

3. Axios in React

Folder Construction

API config

import axios from "axios";
import { store } from "../redux/store";
const axiosClient = axios.create({
  baseURL: process.env.REACT_APP_SERVER_URL,
});
axiosClient.interceptors.request.use(
  (config) => {
    config.headers.Authorization = "Bearer " + store.getState().user.token;
    return config;
  },
  (error) => {
    throw error;
  }
);

axiosClient.interceptors.response.use(
  (res) => {
    return res;
  },
  (error) => {
    const { status } = error.response;
    if (status === 401) {
      localStorage.removeItem("token");
      window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);
export default axiosClient;

Use Axios

4. Axios with file(image, videos) upload

React File Upload with Axios and Progress Bar to Rest API - BezKoderBezKoder