react js - How to do Service layer call

Question

I am trying to segregate below axios function to a separate service layer. Pls suggest how to do this in react js ?

class xxx extends Component {
constructor(props) {
    super(props)
    this.state = {
        ownerName: '',
    }
    this.handleKeyUp = this.handleKeyUp.bind(this)
}

handleKeyUp(e) {
    if (e.target.value.length > 4) {
        var self = this
        axios.get(`/https://exampleService.com/${e.target.value}`)
            .then(function (response) {
                self.setState({ownerName: response.data['name']})
            })
            .catch(function (error) {
                if (error.response) {
                    if (error.response.status === 404) {
                        self.setState({ownerName: `\u2014`})
                    }
                }
            })
    }
}

render () {
    return (
        <div>
            <Input OnKeyUp={(event) => this.handleKeyUp(event)} ></Input>
        </div>
        );
    }
}

I tried to separate like below using module.exports, but I'm unable to get the output from module component and pass it to xxx component.

module.exports = {
    axios.get ......
    .....
}

Answer 1

You can create a class called Api and create a function in that class which would do the axios call. This function should accept a callback function, which you can use for setting the state in your component.

export default class Api{

    function DoAxiosCall(callback){
    axios.get(`/https://exampleService.com/${e.target.value}`)
                .then(function (response) {
                    callback(response.data['name']);
                })
                .catch(function (error) {
                    if (error.response) {
                        if (error.response.status === 404) {
                            callback(`\u2014`)
                        }
                    }
                })
    }
}

From your component, you can import the Api class, create an instance of it and then call the function which handles the axios call, passing the function that handles updating the state as the callback.

import Api from './path/to/Api';
....
class xxx extends Component {
constructor(props) {
    super(props)
    this.state = {
        ownerName: '',
    }
    this.handleKeyUp = this.handleKeyUp.bind(this)
    this.api = new Api();
}

updateState =(newOwner)=> this.setState({ownerName:newOwner})

handleKeyUp(e) {
    if (e.target.value.length > 4) {
      this.api.DoAxiosCall(this.updateState);
    }
}

render () {
    return (
        <div>
            <Input OnKeyUp={(event) => this.handleKeyUp(event)} ></Input>
        </div>
    );
}
}

Answer 2

You can create service module like below.

// service.js

'use strict';

const axios = require('axios');

const getOwner = (url) => axios.get(url)
.then(response => response.data['name'])
.catch((error) => {
   if (error.response && error.response.status === 404) {
            return `\u2014`;
   };
});

module.exports = {
 getOwner
}

Now, you can use this getOwner function in your xxx component by requiring it.

 // xxx component

 const {getOwner} = require('path of service.js'); 
 ....
 ....
 handleKeyUp(e) {
 if (e.target.value.length > 4) {
    return getOwner(`https://exampleService.com/${e.target.value}`)
        .then(response => this.setState({ownerName: response}))
 }
} 
...
...