javascript 发送前检查 Axios 请求 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50296744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check Axios request url before sending
提问by Dan
API requests are failing because the URL generated by Axios is incorrect due to my config. I know what the request url is suppose to look like, so I want to see the request url Axios generates.
API 请求失败，因为我的配置导致 Axios 生成的 URL 不正确。我知道请求 url 应该是什么样子，所以我想看看 Axios 生成的请求 url。
I can point Axios to my local server and see the requests there, but I want to debug this on the client. I want to play with the config, and see how the requests change. Is there a way to output the request url from Axios before or after sending?
我可以将 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)
}
I am within the Expo, React Nativeenvironment.
我在Expo,React Native环境中。
Working example using fetch:
使用 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)
})
Solution used:
使用的解决方案：
_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,
})
}
回答by Matt Aft
You can turn on debug mode and look at the network tab as mentioned in the other answer, or you can intercept axiosand console.log or do whatever you want with the request before it's sent:
您可以打开调试模式并查看其他答案中提到的网络选项卡，或者您可以拦截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);
});
回答by Trevor Robinson
You can just use axios#getUri([config])(source) to perform the same logic as the request. It merges the configurations (e.g. the given configand the instance configuration), merges the urlwith the baseURL, and appends any paramsusing the paramSerializer.
您可以使用axios#getUri([config])( source) 执行与请求相同的逻辑。它合并配置（例如给定config和实例配置），将url与合并baseURL，并params使用附加任何paramSerializer。
回答by Kamil Kie?czewski
Here is answer for this version of question: Use
这是此版本问题的答案：使用
Chrome-console > Network tab
Chrome 控制台 > 网络标签
There you will find all informations about your requests send by javascript
在那里你会找到关于你的请求的所有信息由 javascript 发送
