Axios get giving network error

Question

I’m taking a course of React Active, but since my computer didn’t run Genymotion, I had to improvise and downloaded Bluestacks to debug the projects. The problem is that when my program requests from the internet, it always returns me Network Error. I am using the.

The whole mistake is this:

I’ve searched everywhere I can think of, but I can’t find anything to solve this problem.

Edit: had forgotten to put the code

main.js:

import React, { Component } from 'react';
import api from '../services/api';

import { View, Text } from 'react-native';

export default class Main extends Component {
    static navigationOptions = {
        title: 'JSHunt'
    };

    componentDidMount() {
        this.loadProducts();
    }

    loadProducts = async () => {
        const response = await api.get('/products');

        //const { docs } = response.data;

        //console.log(docs);
    };

    render() {
        return (
            <View>
                <Text>Página Main</Text>
            </View>
        );
    }
}

api.js

import axios from 'axios';

const api = axios.create({
  baseUrl: 'https://rocketseat-node.herokuapp.com/api'
});

export default api;

Answer 1

This error is happening due to a syntax error. When creating an instance of AXIOS, you should be using the property baseURL, nay baseUrl.

Another improvement you could make in code is to add a block try/catch, because the way it is, when a request fails, the only mistake you will receive is that an exception has been cast and not captured, which is not a very useful feedback to find out the reason for the error.

loadProducts = async () => {
    try {
        const response = await api.get('/products');

        //const { docs } = response.data;

        //console.log(docs);

    } catch(err) {
        // TODO
        // adicionar tratamento da exceção
        console.error(err);
    }
};