برنامه نویسی

از axios به عنوان تمرین بهتر در ReactJS استفاده کنید

در این پست استفاده از axios را به صورت in توضیح می دهم ReactJS همه شما به خوبی می دانید که axios درخواست http را در یک وعده مدیریت می کند.

از axios به عنوان http استفاده کنید

import axios from 'axios';

export let URL="http://localhost:5000/api/v1";
export let URL_PROFILE="http://localhost:5000/uploads/avatar/";
export let URL_POST="http://localhost:5000/uploads/posts/";
export let AUTH_TOKEN=localStorage.getItem('token')||'';

axios.defaults.baseURL = URL;
axios.defaults.headers.common['x-auth-token'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


export const http=axios;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و از http در خدماتی مانند استفاده کنید

import { http, URL } from "./http.service";
import { errorHandler } from "./error.service";

export const getAllTags=async ()=>{
    try {
        let resp=await http.get(URL+'/tag/all/tags')
        return resp;
    } catch (error) {
        errorHandler(error)
    }
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهتر است از axios در برنامه خود استفاده کنید
و زمانی که توکن پیش فرض خود را به این صورت تغییر می دهید

import { http} from "./http.service";
export const setToken=(token)=>{
  axios.defaults.headers.common['x-auth-token'] = token;
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از کنترل کننده خطا استفاده کنید

import { toast } from "react-toastify"

export const errorHandler=(error)=>{
   if(error.message==="Network Error" && error.status===500){
        toast.error(error.message)
   }
   toast.error(error?.response?.data?.message)
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

من فکر می کنم شما درک بهتری از axios تمرین بهتری برای استفاده دارید. متشکرم.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا