Axios에서 GET, POST, PUT, DELETE

Axios는 node.js 및 브라우저용 약속 기반 HTTP 클라이언트입니다. 그것은 동형 모양을 가지고 있습니다 (동일한 코드베이스로 브라우저와 nodejs에서 실행할 수 있습니다). 서버에서는 기본 node.js http 모듈을 사용하고 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.

설치

npm 사용

npm install axios

정자 사용

bower install axios

실 사용

yarn add axios

React 앱 구축에 대한 이전 기사를 확인하십시오.

Yarn 패키지 관리자를 사용하여 React 애플리케이션 빌드

Rohith ND ・ 4월 7일 ・ 1분 읽기

#yarn #react

이제 js 코드에 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);
  })

삭제 요청

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

React 클래스에서 Axios 사용

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();
    var data = {
      id: 1,
      name: "rohith",
    };
    try {
      await axios({
        url: url,
        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 axios({
        url: url,
        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 axios({
        url: url,
        method: "DELETE",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

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

export default AxiosRequests;

참고: async/await는 Internet Explorer 및 이전 브라우저에서 지원하지 않는 ECMAScript 2017의 기능이므로 주의하여 사용하십시오.

문서: https://axios-http.com/docs/intro