Axios 인스턴스 생성

이 블로그에서는 반응 프로젝트에서 axios 인스턴스를 생성하는 방법을 보여드리겠습니다.

이전 블로그에서 Axios의 기본 사항을 다루었습니다.

Axios에서 GET, POST, PUT, DELETE

Rohith ND ・ 4월 9일 ・ 2분 읽기

#axios #javascript #http #react

반응 앱이 생성되면 components 디렉토리 안에 src 폴더를 만들 수 있습니다. 나중에 components 폴더 안에 api 및 main라는 두 개의 폴더를 만들어 api 인스턴스 파일 및 기타 웹 페이지 파일을 보관합니다. .

src
|--components 
            |-api
            |-main

api 디렉토리 내부에 api_instance.js라는 파일을 만들 수 있습니다. 여기에서는 내 localhost를 baseURL로 사용하고 있습니다.

import axios from "axios"; 

const instance = axios.create({
  baseURL : 'http://127.0.0.1:8000/api/',
  headers: {
//  Authorization: `<Your Auth Token>`,
    Content-Type: "application/json",
    timeout : 1000,
  }, 
  // .. other options
});

export default instance;

인스턴스 파일 생성을 완료한 후 js 파일로 가져올 수 있습니다.home.js 폴더 안에 main라는 파일을 만들어 봅시다.

import React, { Component } from "react";
import instance from "../api/api_instance";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "home/",
        method: "GET",
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  }

  postData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "rohith",
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-create/",
        method: "POST",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  putData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "ndrohith",
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-update/",
        method: "PUT",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  deleteData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-delete/",
        method: "DELETE",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  render() {
    return <>Home Page</>;
  }
}

export default Home;

그게 전부입니다. axios 인스턴스가 생성되었으며 프로젝트에 따라 구성할 수 있습니다.