ReactNativeでaxiosを使ってAPIの共通処理を実装する

APIの共通処理を実装

大規模な開発になるとフロントからたくさんのAPIを叩くことになります。
そこでAPIを叩く際の共通処理を作成し、毎回詳しく記述しなくて済むようにしたいと思います。
今回はaxiosを使って実装していきますのでインストールしておいてください
yarn add axios

APIの共通処理を実際に作っていく

api.tsを作成

import axios from 'axios'

export const api = axios.create({
    baseURL:'https://jsonplaceholder.typicode.com/',
})

// api.interceptors.request.use(
//     config.headers.authorization= `Bearer ${ここにアクセストークンを入れる}`
// )

api.interceptors.response.use(
    response => {
        return response
    },
    function(error) {
        switch(error.response.status) {
            case 400:
            case 401:
                console.log('認証エラーです');
            case 404:
                console.log('URL先がないです');
            default:

        }
    }
)

実際の開発では認証用にアクセストークンをつけてリクエストを投げると思いますが、今回はjsonplaceholderを使って手軽に検証しているのでコメントアウトにしています。
初めにbaseURLを設定します。
そして、アクセストークンをつける必要がある場合はコードの用にrequest.use内に設定します

response.useではAPIから返ってきたレスポンスの処理を書きます。
成功時にはそのままreturnで返し、エラーがある場合はステータスコードに合わせて処理を書くことができます。

これを毎回API毎に記述するのはコード量も増すし、めんどくさいので共通にまとめておくことでわかりやすいですね！

実際にAPIを呼ぶ側の処理を作っていく

新規ファイルを作成し、

import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, FlatList, SafeAreaView} from 'react-native';
import {api} from '../api/api';

export const ApiResearch = () => {
  const [postsData, setPostsData] = useState([]);

  const getPostsData = async () => {
    const res = await api.get('posts');
    setPostsData(res.data);
  };

  useEffect(() => {
    getPostsData();
  },[]);

  return (
    <SafeAreaView>
      <Text style={styles.title} >ここからpostデータです</Text>
      <FlatList
        data={postsData}
        renderItem={({item}) => <Text>{item.title}</Text>}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
    title: {
        fontSize:20,
        fontWeight:'bold',
        paddingBottom:10
    }
   });

まず、先ほど作ったAPIの共通処理をimportし、初期表示時にgetPostDataでAPIを呼ぶように記述しています。
getPostsData内ではimportしたapiの後にgetメソッドを記述し、先程baseURLで設定したURLの続きを記述しています。
これでAPIを呼ぶことができるようになります。

ちなみに表示はFlatListを使って返ってきたレスポンス（配列）をマッピングし、全部表示しています

別のAPIも呼んでみる

import React, {useEffect, useState} from 'react';
import {StyleSheet, Text, FlatList, SafeAreaView} from 'react-native';
import {api} from '../api/api';

export const ApiResearch = () => {
  const [postsData, setPostsData] = useState([]);
  const [usersData, setUsersData] = useState([]);

  const getPostsData = async () => {
    const res = await api.get('posts');
    setPostsData(res.data);
  };

  const getUsersData = async () => {
    const res = await api.get('users');
    setUsersData(res.data);
  };

  useEffect(() => {
    getPostsData();
    getUsersData();
  },[]);

  return (
    <SafeAreaView>
      <Text style={styles.title} >ここからpostデータです</Text>
      <FlatList
        data={postsData}
        renderItem={({item}) => <Text>{item.title}</Text>}
        keyExtractor={item => item.id.toString()}
      />
      <Text style={styles.title}>ここからuserデータです</Text>
      <FlatList
        data={usersData}
        renderItem={({item}) => <Text>{item.name}</Text>}
        keyExtractor={item => item.id.toString()}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
    title: {
        fontSize:20,
        fontWeight:'bold',
        marginBottom:10
    }
   });

次はjsonplaceholderからuserデータを呼んでいますが、先ほどと同じような記述で簡単に呼び出すことができます

今回はjsonplaceholderで検証したので、わかりにくかったかもしれないですが、実際の大規模の開発だととても恩恵を受けることになるので覚えておいて損はないです！