using axios in service object in React Native fails - react-native

Question

I can't figure out why this does not work. I think it has to do with having a promise nested inside another promise:
I set up my api service object:
api.js
import axios from 'axios';
import apiConfig from './apiConfig';
import deviceStorage from '../services/deviceStorage.js';
export const get = (endpoint, payload = {}, headers = {}) => {
const jwt = deviceStorage.loadJWT
headers.Authorization = jwt
console.log("running..");
axios({
method: 'GET',
url: apiConfig.development.url + endpoint,
headers: headers,
data: payload,
}).then((response) => {
console.log('will return response..');
return response;
}).catch((error) => {
console.log('will return error..');
return error;
});
};
then I call it from a screen:
NotificationsScreen.js
import React from 'react';
import { View, ScrollView, Text, Button, StyleSheet } from 'react-native';
import axios from 'axios';
import Header from '../components/Header';
import NotificationCardSection from '../components/notificationsScreen/NotificationCardSection';
import NotificationCardList from '../components/notificationsScreen/NotificationCardList';
import { Loading } from '../components/common/';
import globalStyles from '../globalStyles';
import * as api from '../services/api'
export default class NotificationsScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
notifications: [],
error: ''
};
}
componentDidMount() {
console.log("will get data from api");
api.get(
'/notifications'
).then((response) => {
console.log("got back data from api");
this.setState({
notifications: response.data.data,
loading: false
});
}).catch((error) => {
console.log("got error from api");
this.setState({
error: 'Error retrieving data',
loading: false
});
});
}
but i get an error:
TypeError: Cannot read property 'then' of undefined.
terminal shows 'running..' but does not show 'will return response...' or 'will return error' so they are not firing.
I assume it is because the api call has not finished yet, but since it is async, how can I make sure it HAS finished when calling it from the screen?

Answer 1

You are expecting a Promise to be returned from your get since you are using then and catch on it but you are just returning a response or an error.
Your get function should look like the below if you want to use .then with it:
export const get = (endpoint, payload = {}, headers = {}) => {
return new Promise((resolve, reject) => {
const jwt = deviceStorage.loadJWT
headers.Authorization = jwt
console.log("running..");
axios({
method: 'GET',
url: apiConfig.development.url + endpoint,
headers: headers,
data: payload,
})
.then((response) => {
console.log('will return response..');
resolve(response);
})
.catch((error) => {
console.log('will return error..');
reject(error);
});
});
};