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データを呼んでいますが、先ほどと同じような記述で簡単に呼び出すことができます
