Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check Axios request url before sending

API requests are failing because the URL generated by Axios is incorrect due to my config. I know what the request url is suppose to look like, so I want to see the request url Axios generates.

I can point Axios to my local server and see the requests there, but I want to debug this on the client. I want to play with the config, and see how the requests change. Is there a way to output the request url from Axios before or after sending?

// param format
{ address: 'Vancouver', key: GOOGLE_API_KEY }

// Geocode sample
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

_request = async (...args) => {
  const { outputFormat, params } = args
  const instance = axios.create({
    baseURL: `https://maps.googleapis.com`,
  })

  const response = await instance.get('/maps/api/geocode/${outputFormat}?', {
    params,
  })

  // I want to see the url generated by Axios so I can debug the issue

  console.log(response) 
}

I am within the Expo, React Native environment.

Working example using fetch:

const url = `https://maps.googleapis.com/maps/api/geocode/json?address=vancouver&key=${GOOGLE_API_KEY}`

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
  })
  .catch(function(error) {
    console.log(error)
  })

Solution used:

_request = async (obj) => {
  const { outputFormat, params } = obj

  const instance = axios.create({
    baseURL: `https://maps.googleapis.com`,
  })

  instance.interceptors.request.use(function (config) {
    console.log(config)
    return config
  }, function (error) {
    return Promise.reject(error)
  })

  const response = await instance.get(`/maps/api/geocode/${outputFormat}`, {
    params,
  })
}
like image 833
Dan Avatar asked May 11 '18 16:05

Dan


2 Answers

You can turn on debug mode and look at the network tab as mentioned in the other answer, or you can intercept axios and console.log or do whatever you want with the request before it's sent:

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log(config)
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
like image 76
Matt Aft Avatar answered Sep 21 '22 06:09

Matt Aft


You can just use axios#getUri([config]) (source) to perform the same logic as the request. It merges the configurations (e.g. the given config and the instance configuration), merges the url with the baseURL, and appends any params using the paramSerializer.

like image 33
Trevor Robinson Avatar answered Sep 25 '22 06:09

Trevor Robinson