Axios.get() request Async/await catch block error is not defined

[airnichols13]

Describe the bug

I am having an issue where if I try to use async/await to make an API request, the catch in the try/catch is not passed the error. If I switch to using the .then/.catch syntax, it does work.

I've tried all sorts of combinations and nothing I have done gets the error to the catch block. All the documentation I've read makes it seem like as long as you're within an async function, and await'ing the api request, any exception should be caught in the catch, but I have not seen that work.

The server error is present in the interceptor, and the .catch syntax, but not the try/catch.

Code snippet

// Works:
async function getList(config?: AxiosRequestConfig): Promise<T[]> {
	return axios
		.get(endpoint, config)
		.then((response) => {
			return response.data;
		})
		.catch((error) => {
                        // `error` is defined here
			throw error.response.data;
		});
}


// Does *not* work:
async function getList(config?: AxiosRequestConfig): Promise<T[]> {
	let list;
	try {
		list = await axios.get(endpoint, config);
	} catch (error: any) {
		// `error`: Uncaught ReferenceError: error is not defined
		throw error;
	}
	return list.data;
}

Expected behavior

The error is available in the catch block of the async function.

Axios Version

1.3.4

Browser

Chrome

Browser Version

110.0.5481.178

Node.js Version

18.13.0

OS

Windows 11

Additional Library Versions

Vue 3.2.47
Vue Router 4.1.6
Typescript 4.9.5

[cedric05]

const axios = require('axios');
async function tryGet(config, endpoint) {
        try {
                const resp= await axios.get(endpoint, config);
                return resp.data
        } catch (error) {
                console.log(error);
                throw error;
        }
}
tryGet({}, 'https://httpbin.org/status/500').then(console.log).catch(console.error);

Unable to reproduce, can you try with above code as reference.

[airnichols13]

That didn't work either, the error in the catch block is still not defined.

I don't know if this has anything to do with it, but I'm creating an axios instance to use throughout my app:

import axios from "axios";

const axiosInstance = axios.create({
	baseURL: "/",
	headers: {
		"Content-type": "application/json",
		"Access-Control-Allow-Origin": "*"
	}
});

export default axiosInstance;

[philBrown]

headers: {
  "Content-type": "application/json",
  "Access-Control-Allow-Origin": "*"
}

You don't need either of those headers and access-control-allow-origin should never be in a request. In fact, it's probably causing the preflight to fail leading to your problem