? ???? React?? Axios? ???? ???? ???? API ?????? ??? ??? ?? ???????. APIClient ???? ???? ????, ?? ?? ?? ? CRUD ???? Axios ??? ?? ????. ? ????? ?? ??? ???? ??? ??? ???????.

1. ?? Axios ??

import axios from "axios";
import secureLocalStorage from "react-secure-storage";

axios.defaults.baseURL = "";
axios.defaults.headers.post["Content-Type"] = "application/json";

? ?? Axios ??? baseURL? ???? ?? POST ??? ?? Content-Type? ?????. baseURL? ???? Axios? ?? ??? ??? ?? URL? ???? ????? API ?? ? ????? ??? ? ?????.

2. ?? ? ?? ??? ?? ???? ??

????? ????? ??? ??? ??? ? ?? ??? ??? ?????.

?? ??

axios.interceptors.response.use(
    function (response) {
        return response.data ? response.data : response;
    },
    // ...

## Handling Errors

);

? ?? ????? ?? ?? ???? ??? ?????. ???? ?? ??? ???? ?????. ??? ?? response.data? ????? ????? ??? ?? ??? ??? ?? ???? ?? ? ????.

?? ??

function (error) {
    if (error?.response?.status === 401 && error?.response?.data?.data === 'Token is not valid'){
        secureLocalStorage.clear()
        window.location.href = '/'
    } else {
        let message;
        switch (error?.response?.status) {
            case 500:
                message = error?.response;
                break;
            case 401:
                message = error?.response;
                break;
            case 404:
            case 400:
            case 409:
                message = error?.response?.data;
                break;
            default:
                message = error.message || error;
        }
        return Promise.reject(message);
    }
}

? ???? ?? ??? 401?? ??? ???? ?? ?? ?? ?? ?? ????? ??? ??? ???? ??? ???? ???????. ??? ?? ?? ??? ???? ???? ???? ???????. ?? ?? ??? ?? ??? ???? ?? ??? ?? ??? ???? ?????.

3. set?? ?? ??

const setAuthorization = (token) => {
    axios.defaults.headers.common["token"] = token;
};

? ??? ???? ?? ?? ??? ???? ??? ???? ??? ? ????. ??? ? setAuthorization(token)? ???? ???? ?? ??? ??? ?????.

4. CRUD ???? APIClient ??? ??
APIClient ???? ????, ???, ????, ??, ?? ? HTTP ??? ?? ?? ???? ?????.

get ???
? ??? ???? ?? ?? ??? ???? ????? ?????.

get = (url, params) => {
    let response;
    let paramKeys = [];

    if (params && typeof (params) === 'object') {
        Object.keys(params).map(key => {
            if (key === 'pagination') {
                paramKeys.push("pageIndex=" + String(params[key]?.pageIndex || 1));
                paramKeys.push("pageSize=" + String(params[key]?.pageSize || 10));
            } else {
                paramKeys.push(key + '=' + params[key]);
            }
        });
        const queryString = paramKeys.length ? paramKeys.join('&') : "";
        response = axios.get(`${url}?${queryString}`, params);
    } else if (typeof (params) === 'string') {
        response = axios.get(`${url}/${params}`);
    } else {
        response = axios.get(url, params);
    }

    return response;
};

? ??? ?? ???? ??? ???? ????? ??? ??, ?? ?? ??? ?? ??? ????? ??? GET ??? ? ?? ??? ? ????.

??? ??, ????, ?? ? ??
??? ???? Axios? ??? ??, ??, ?? ? ?? ??? ???? API? ???????.

create = (url, data) => {
    return axios.post(url, data);
};

update = (url, data) => {
    return axios.patch(url, data);
};

put = (url, data) => {
    return axios.put(url, data);
};

delete = (url, config) => {
    return axios.delete(url, { ...config });
};

? ???? API ??? ????? ?? ??? ??? ? ???? ????? ??? ???? ????.

API ????? ?? ??

import { API_URL, API_VERSION } from "#/Common/constants/env";
import { APIClient } from "#/helpers/api_helper";

export const POST_LOGIN = API_URL + API_VERSION +  "/auth/login";

const api = new APIClient();
export const Login = (data: any) => api.create(POST_LOGIN, data);

?? ????? ?? ??? ?????
???? ????

? ??? Axios ???? React JS? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!