Expo/React Native环境下调试Axios生成的请求URL

Absolutely! You can inspect the full URL Axios generates directly on your Expo/React Native client—no local server required. The perfect tool for this is Axios request interceptors, which let you tap into the request configuration right before it’s sent out.

The Problem #

You’re calling the Google Geocoding API with Axios but your requests are failing due to incorrect URL formatting. You know what the correct URL should look like (your working fetch example confirms this), and you want to debug by seeing exactly what URL Axios is constructing.

Your Original Axios Code #

Here’s the code you started with, where logging the response doesn’t show the full request URL:

// 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)
}

Working Fetch Reference #

For context, here’s your manual fetch example where you build the URL explicitly:

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)
  })

The Solution: Axios Request Interceptors #

Axios request interceptors run immediately before a request is dispatched. You can use one to log the full request configuration—including the final constructed URL—so you can compare it to your working fetch URL.

Here’s the adjusted code that solves your debugging need:

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

  // Add a request interceptor to log the full URL before sending
  instance.interceptors.request.use(function (config) {
    // Log the fully resolved request URL
    console.log('Axios Generated URL:', config.url);
    // Optional: Log the entire config object to see all request details
    console.log('Full Request Config:', config);
    return config; // Critical: Return the config so the request proceeds
  }, function (error) {
    // Handle any request setup errors
    return Promise.reject(error);
  })

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

How It Works #

• The interceptor captures the config object, which includes the fully resolved url property (combining your baseURL, path, and query params into one complete address).
• Logging config.url gives you exactly what you need to cross-check against your working fetch URL and spot formatting issues.
• Don’t forget to return the config in the interceptor—without this, the request won’t be sent.

内容的提问来源于stack exchange，提问作者Dan