发送前检查Axios请求网址

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环境。

使用提取的工作示例：

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#getUri([config])( source ) 来执行与请求相同的逻辑。它合并配置（例如给定config和实例配置），将url与合并baseURL，并params使用附加任何paramSerializer。

Answer 2

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