相信使用vue的很多童鞋，都知道axios，因为现在vue官网也是推荐我们使用axios往后台发送请求
其实吧 请求拦截不是必须的 但是用好的话,确实可以帮我节省很多功夫和代码量
说成请求拦截 这么高大上 其实 用俗话说就是 请求之前 先检验一遍 发送的数据或者获取下token数据
一般我们在开发的时候 从后台的数据回来我们都要判断下状态吗 这样会导致我们代码量会增加不少
如果我们在 回来之前拦截下 提前将数据过滤去下 是不是就达到了 事半功倍的效果了
1.在实现之前 我先用 kao框架 搭建了一个简易的后台 用来用户登录使用
端口号 是 http://localhost:3000/user/loginUser 请求方法是 post
这里我使用了element-ui 实现了快速 布局一个小的demo
2.准备一个vue脚手架 安装好 axios
在src目录下创建一个 utils 文件夹 专门放置一些工具文件
我们创建一个 request.js 来设置 基础的配置
import axios from "axios"; //引用axios
// axios 配置
axios.defaults.timeout = 5000; //设置连接超时时间
axios.defaults.baseURL = "http://localhost:3000/"; //这是调用数据接口，项目上线的时候修改这个地方就可以了
也可以这样书写
const service=axios.create({
timeout:5000,
baseUrl:"http://localhost:3000" // 我们在请求接口的时候就不同写前面 会自动我们补全
})
// 如:http://localhost:3000/user/loginUser 使用aixos的时候直接写 /user/loginUser 就可以了
// 请求拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，
我这里是使用sessionStorage来存储token等权限信息和用户信息 token一般时间 比较短
service.interceptors.request.use(
config => {
const token = sessionStorage.getItem("token"); //获取存储在本地的token，如果需要token就在这里带上
config.data = JSON.stringify(config.data); // 这里我们也可以在过滤下 请求参数数据
config.headers = { // 设置请求头 常用语post请求
"Content-Type": "application/json"
};
if (token) {
config.headers.Authorization = "Token " + token; //存在的话 就携带 token
}
return config; // 然后把配置返回
},
err => {
console.log(err) // 如果出错的话 打印出来错误看看
}
);
// 响应拦截器 请求回来的结果 先在这里过一遍
service.interceptors.response.use(
response => {
if (response.status == 201) { // 请求回来的状态除了 200 其他的 均是不对的数据 在这里统一处理
this.$router.push({
path: "/login" // 如果回来状态不对 还是返回 请求页面
});
}
return response; // 返回请求回来的数据
},
err => {
console.log(err)
}
);
export default service; // 把配置好的对象 导出
3.在src文件夹下 创建一个 api的文件夹 /api/user.js
import request from "../utils/request.js";
// 导出登陆的方法 ， 请求的时候只用把参数传递进来就好了
export function login(data) {
return request({
url: "/user/loginUser",
method: "post",
data
});
}
4.前台数据
import { login } from "../api/index"; // 引入 login方法
export default {
data() {
return {
ruleForm: {
userName: "",
password: ""
}
};
},
methods: {
submitForm() {
login(this.ruleForm).then(res => {
console.log(res); // 如果一切配置完成 这里应该返回的res就是从后台请求到的数据
});
}
}
};
5.总结
请求拦截 可以要可不要 具体情况还是根据项目来说的,适合项目的才是好方法
最后复习下普通的axios请求的方法
axios({
url:"",
method:"get"
params:{}
})
axios({
url:"",
method:"post"
data:{}
})