Axios get Giving Network error

Question

Axios get Giving Network error

I'm doing a react Native course, 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 makes internet requests, it always returns me Network Error. I'm using axios.

The Complete error is this:

I've searched everywhere I could think of, but found nothing that would solve this problem.

Edit: had forgot 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;

2

javascript react-native axios mobile

Author: feehgodoi08, 2019-08-24

Source

1 answers

score 3 · Accepted Answer

This error is happening because of a syntax error. When instantiating AXIOS, you should be using the property baseURL, not baseUrl.

Another improvement you could make in the code is to add a block try/catch, because the way it is, when a request fails, the only error you will receive is that an exception was thrown and was not caught, 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);
    }
};