Axios에서 Get, Post, Put, Delete

Source: Dev.to

설치

npm

npm install axios

bower

bower install axios

yarn

yarn add axios

Axios 가져오기

import axios from 'axios';

Axios 기본

GET 요청

axios.get('url')
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  });

POST 요청

axios.post('url', {
  id: 1,
  name: 'rohith'
})
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  });

PUT 요청

axios.put('url', {
  id: 1,
  name: 'ndrohith'
})
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  });

DELETE 요청

axios.delete('url', {
  id: 1,
})
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  });

React 클래스에서 Axios 사용

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

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

  async componentDidMount() {
    try {
      await axios({
        url: url,
        method: "GET",
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  }

  postData = async (e) => {
    e.preventDefault();
    const data = { id: 1, name: "rohith" };
    try {
      await axios({
        url: url,
        method: "POST",
        data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      console.error(e);
    }
  };

  putData = async (e) => {
    e.preventDefault();
    const data = { id: 1, name: "ndrohith" };
    try {
      await axios({
        url: url,
        method: "PUT",
        data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      console.error(e);
    }
  };

  deleteData = async (e) => {
    e.preventDefault();
    const data = { id: 1 };
    try {
      await axios({
        url: url,
        method: "DELETE",
        data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      console.error(e);
    }
  };

  render() {
    return <>;
  }
}

export default AxiosRequests;

Note: async/await는 Internet Explorer 및 구형 브라우저에서 지원되지 않는 ECMAScript 2017 기능입니다; 사용에 주의하십시오.

참고: Axios Documentation