Question

API请求失败，因为Axios生成的URL由于我的配置而不正确。我知道请求网址是什么样的，所以我希望看到Axios生成的请求网址。

我可以将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

您可以打开调试模式并查看其他答案中提到的网络选项卡，或者您可以拦截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);
  });

Answer 2

您可以只使用axios#getUri([config])（source）来执行与请求相同的逻辑。它合并配置（例如给定的config和实例配置），将url与baseURL合并，并使用params附加任何paramSerializer。

Answer 3

使用

Chrome控制台＆gt;网络标签

通过javascript

，您可以找到有关您的请求的所有信息

发送前检查axios请求网址

3 个答案: