Как создать менеджер API на основе функций.

хук useAPImanager

В основном мы используем диспетчер API на основе классов.

В диспетчере API на основе классов мы не можем использовать реагирующие крючки, такие как состояние использования, эффект использования и т. д.

В этой статье я покажу, как создать менеджер API на основе функций и использовать его в нашем проекте.

Мы создаем кастомный хук менеджера API.

Сначала создайте файл с именем useAPIManager.js (или любое другое имя, начинающееся с use…)

Затем импортируйте реакцию

import React, { useEffect, useState } from 'react'; 
 import axios from 'axios'; 
  
 const BASE_URL = "http://baseurl.com/";
  
 function useApiManager() { 
  
   const endPoints = { 
     ENDPOINT: 'endpoint/', 
   }; 
  
   const getData = async () => { 
     return axios({
       url: BASE_URL + endPoints.ENDPOINT, 
       method: 'get',
     }); 
   }; 
  
   return { 
     getData
   }; 
 } 
  
 export default useApiManager;

В этом методе мы можем использовать все типы крючков.

Как использовать его в файле .

Первый импорт useAPImanager из файла

import useApiManager from 'networking/ApiManager';

Затем используйте этот синтаксис

const ApiClient = useApiManager();

Затем вызовите API следующим образом

  const getdata = () => {
     ApiClient.getData() 
       .then((res) => {
         console.log(res)
       }) 
       .catch((err) => console.log(err)) ;
   };