Why is axios not returning correctly

I am trying to replace a fetch with axios. I keep getting undefined in my console log.

async componentDidMount() {        
    console.log('app mounted');

    const tokenString = sessionStorage.getItem("token");
    const token = JSON.parse(tokenString);

    let headers = new Headers({
        "Accept": "application/json",
        "Content-Type": "application/json",
        'Authorization': 'Bearer ' + token.token
    });

    const response = await axios({
        method: 'get',
        url: Config.apiUrl + `/api/Orders/GetAllInvoices`,
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json",
            'Authorization': 'Bearer ' + token.token }
    });
    console.log(`axios: ${response.json}`)
    this.setState({ invoiceList: response.json });
    
    //const response = await fetch(Config.apiUrl + `/api/Orders/GetAllInvoices`, {
    //    method: "GET",
    //    headers: headers
    //});
    //const json = await response.json();
    //console.log(json);
    //this.setState({ invoiceList: json });
    ...

… the commented out fetch is working. I just now added the .json even though axios should not need it. Neither way works. What am I doing wrong?

Answer

Did you even console.log(response) just to see whats inside of it?

I guess you dont, because response is an object witch has no json key in it. You should use response.data

Advertisement

Answer