拦截器——main.js中,可以编写
Axios.interceptors.request.use()来拦截所有的请求,对请求做相应护理后再放行搭配后端,这也是全局的,每个请求中无需自己处理
在main.js中配置
Axios.defaults.baseURL='http://127.0.0.1:8088';
import qs from 'querystring';
拦截器代码:
Axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if(config.method==="post"||config.method=="put"){
config.data=qs.stringify(config.data);
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
代码解释:
1. 设置拦截器
Axios.interceptors.request.use: 这个方法用于向 Axios 实例添加一个请求拦截器。use 方法接受两个函数作为参数:
第一个函数 在请求发送之前执行,允许你修改请求的配置。
第二个函数 处理请求配置过程中的任何错误。
2. 请求配置函数
function (config): 这个函数在请求发送之前被调用。config 对象包含有关请求的信息,比如 URL、方法、头部和数据等。
在这个函数内:
if (config.method === "post" || config.method === "put"): 这个条件检查请求的方法是否是 POST 或 PUT。这两种方法通常用于向服务器发送数据。
config.data = qs.stringify(config.data);: 如果条件为真(即请求方法是 POST 或 PUT),这一行代码将请求体(config.data)从对象转换为 URL 编码的字符串格式。qs.stringify 是 qs 库中的一个工具,用于执行这种转换。如果服务器期望的数据格式是 application/x-www-form-urlencoded,这一步是必要的。
3. 返回配置
return config;: 在修改完 config 对象后,返回它。这使得 Axios 能够使用更新后的配置来发送请求。
4. 错误处理函数
function (error): 如果在配置请求时出现错误,这个函数会被调用。
return Promise.reject(error);: 这将返回一个被拒绝的 Promise,并携带错误。这确保了错误能够被传播,以便你可以在 .catch 块或其他错误处理机制中处理它。
总结
目的: 这个拦截器在 POST 和 PUT 请求时,将请求数据转换为 URL 编码的字符串格式,这是如果服务器期望这种格式的数据时非常有用的。
用法: 通常在你需要将数据格式化为特定的内容类型(如 application/x-www-form-urlencoded)时使用这种设置。
示例
假设你有以下的 POST 请求:
axios.post('/submit', { key: 'value' });
在拦截器的作用下,qs.stringify 会将 { key: 'value' } 转换为 key=value,这个编码后的字符串将被作为请求体发送。
这种处理方式对于服务器期待表单编码的数据(而不是 JSON)时特别重要。
在Home.vue中定义
export default {
mounted() {
console.log("渲染完成");
this.$axios.put('/book',{
id: '8',
name: '红楼梦',
author: '曹雪芹',
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}