javascript - 发送前检查axios请求url

Question

API 请求失败，因为 Axios 生成的 URL 由于我的配置不正确。我知道请求 url 应该是什么样子，所以我想查看 Axios 生成的请求 url。

我可以将 Axios 指向我的本地服务器并在那里查看请求，但我想在客户端进行调试。我想玩一下配置，看看请求如何变化。有没有办法在发送之前或之后从 Axios 输出请求 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) 
}

我在 Expo，React Native 环境中。

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

使用的解决方案:

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

Answer 1

您可以打开 Debug模式并查看另一个答案中提到的网络选项卡，或者您可以拦截 axios 和 console.log 或在发送请求之前对请求执行任何操作:

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