[React] 10. axiosの使用方法

今日、axiosの正式なドキュメントを参照して、axiosの基本的な使い方を理解します.
axios公式ドキュメント

💚 Axiosバー

ブラウザ、ノード.js用Promise APIベースHTTP非同期通信ライブラリ

💚 axoisのインストール

まずaxiosを取り付けます.
npmインストール

npm i axios

糸の取り付け

yarn add axios

💚使用方法

💛 Axiosインスタンスの作成

axiosを使用してインスタンスを作成します.

axios.create([config])

次のコードは使用例です.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

💛 GET方式

create()要求は以下の形式を採用する.このGETのデータを要求します!

axios.get(url ,[config])

次の関数は、urlにおけるID 12345のユーザの情報を要求するユーザ情報を取得する関数である.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

💛 POST方式

urlメソッドは、サーバ上で新しいデータを作成するために使用されます.

axios.post(url,{data},[config])

このとき、dataはPOSTの形で{}に入れて使用!

async function uploadProfile() {
	const response = await axios.post('/user', {
    	firstName: 'Fred',
   	 	lastName: 'Flintstone'
	 });
}

💛 DELETE方式

JSONは、RESTベースのAPIプログラムからデータベースデータを削除するために使用される.

axios.delete(url,[config])

下と一緒に使います!

async function deleteUser(){ 
	const response = await axios.delete(`/user?userId=2345`);
}

💛 PUT方式

DELETEデータ更新用!

axios.put(url, {data}, [config])

次のコードは、特定のユーザの情報を更新するために使用されます.

async componentDidMount() {
    const response = await axios.put(url,{data});
    this.setState({ updatedAt: response.data.updatedAt });
}