Custom Api Request setup using axios

Anthony Michael answered on October 25, 2023 Popularity 2/10 Helpfulness 1/10

answer Custom Api Request setup using axios

related add api to this by axios

Custom Api Request setup using axios

Comment

import { useAuth } from "@/context/AuthContext";
import axios, { AxiosError, AxiosRequestConfig } from "axios";
import { useCallback, useEffect, useRef, useState } from "react";

interface FetchState<T> {
  data: T | null;
  error: string | null;
  isLoading: boolean;
}

interface UseFetchOptions extends AxiosRequestConfig {
  immediate?: boolean;
  onSuccess?: (data: any) => void;
  onError?: (error: AxiosError | Error) => void;
  cacheKey?: string;
  cacheTime?: number;
}

interface Cache {
  [key: string]: {
    data: any;
    timestamp: number;
  };
}

const cache: Cache = {};

export function useFetch<T = any>(
  url: string,
  options: UseFetchOptions = {}
) {
  const {
    immediate = true,
    onSuccess,
    onError,
    cacheKey,
    cacheTime = 5 * 60 * 1000, // 5 minutes default cache time
    ...axiosOptions
  } = options;

  const { authState } = useAuth();
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    error: null,
    isLoading: immediate,
  });

  const abortControllerRef = useRef<AbortController | null>(null);

  const execute = useCallback(
    async (overrideOptions: AxiosRequestConfig = {}) => {
      // Cancel any ongoing requests
      abortControllerRef.current?.abort();
      abortControllerRef.current = new AbortController();

      // Check cache
      if (cacheKey && cache[cacheKey]) {
        const { data, timestamp } = cache[cacheKey];
        if (Date.now() - timestamp < cacheTime) {
          setState({ data, error: null, isLoading: false });
          onSuccess?.(data);
          return { data, error: null };
        }
        delete cache[cacheKey];
      }

      setState(prev => ({ ...prev, isLoading: true, error: null }));

      try {
        const config: AxiosRequestConfig = {
          ...axiosOptions,
          ...overrideOptions,
          signal: abortControllerRef.current.signal,
          headers: {
            ...axiosOptions.headers,
            ...overrideOptions.headers,
            ...(authState?.token && {
              Authorization: `Bearer ${authState.token}`,
            }),
          },
        };

        const response = await axios(url, config);
        const data = response.data;

        // Cache the response if cacheKey is provided
        if (cacheKey) {
          cache[cacheKey] = {
            data,
            timestamp: Date.now(),
          };
        }

        setState({ data, error: null, isLoading: false });
        onSuccess?.(data);
        return { data, error: null };
      } catch (error) {
        const errorMessage =
          error instanceof AxiosError
            ? error.response?.data?.message || error.message
            : "An unexpected error occurred";

        setState({
          data: null,
          error: errorMessage,
          isLoading: false,
        });

        onError?.(error as AxiosError | Error);
        return { data: null, error: errorMessage };
      }
    },
    [url, authState, cacheKey, cacheTime, onSuccess, onError, axiosOptions]
  );

  useEffect(() => {
    if (immediate) {
      execute();
    }

    return () => {
      abortControllerRef.current?.abort();
    };
  }, [execute, immediate]);

  const clearCache = useCallback(() => {
    if (cacheKey && cache[cacheKey]) {
      delete cache[cacheKey];
    }
  }, [cacheKey]);

  return {
    ...state,
    execute,
    clearCache,
  };
}

Popularity 2/10 Helpfulness 1/10 Language typescript

Source: Grepper

Tags: api axios request typescript using

Link to this answer
Share Copy Link

Contributed on Dec 05 2024

Anthony Michael

0 Answers Avg Quality 2/10

Closely Related Answers

add api to this by axios

Comment

import React, { Component } from 'react';
import axios from 'axios';

class Login extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
      loggedIn: false
    };
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();

    // Replace 'YOUR_API_ENDPOINT' with the actual endpoint for user authentication.
    const apiEndpoint = 'YOUR_API_ENDPOINT';

    // Prepare the data to send to the API
    const data = {
      username: this.state.username,
      password: this.state.password
    };

    // Make an Axios POST request to authenticate the user
    axios.post(apiEndpoint, data)
      .then((response) => {
        // Check if the authentication was successful (you should customize this based on your API response)
        if (response.data && response.data.success) {
          this.setState({
            loggedIn: true
          });
        }
      })
      .catch((error) => {
        console.error("Authentication failed", error);
        // Handle authentication failure, e.g., show an error message to the user
      });
  }

  render() {
    if (this.state.loggedIn) {
      return (
        <div>
          <h2>Welcome, {this.state.username}!</h2>
          <button onClick={() => this.setState({ loggedIn: false })}>Logout</button>
        </div>
      );
    }

    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input
            type="text"
            name="username"
            value={this.state.username}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <label>
          Password:
          <input
            type="password"
            name="password"
            value={this.state.password}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <button type="submit">Login</button>
      </form>
    );
  }
}

export default Login;

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: javascript add this api axios axi

Link to this answer
Share Copy Link

Contributed on Oct 25 2023

Ameer Hani shakir

0 Answers Avg Quality 2/10

Custom Api Request setup using axios

Contents

More Related Answers

Custom Api Request setup using axios

Closely Related Answers

add api to this by axios

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.