Axiosインスタンスの作成

12749 ワード
axios react javascript テキストリンク
このブログでは、反応プロジェクトでAxiosインスタンスを作成する方法を紹介します.
私は以前のブログでaxiosの基礎をカバーしていました.

取得、ポスト、入れて、axiosで削除

ロハイツND・ 4月9日・ 2分読む

#axios #javascript #http #react

あなたの反応アプリが作成されるとcomponents フォルダ内src ディレクトリ.後で、我々の中でcomponents フォルダを作成するapi and main APIインスタンスファイルや他のWebページファイルを保持するには.
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のインスタンスを作成し、プロジェクトに応じて設定することができます.
プラス・マイナス・プラス
React_Native (1)