由于我的配置问题,Axios 生成的 URL 不正确,导致 API 请求失败。我知道请求 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,
})
}
(...args)
会得到一个数组,这将导致未定义的参数,从而出现错误。 - Dan