前言
在进行Vue项目或者React项目开发的时候,我们都需要进行很重要的工作,就是向后端发请求获取数据,所以为了能够更加灵活和便捷的发送请求,在开发之前一般会对axios进行二次封装,在进行封装之前,还是进行简单的axios了解
npm i axios 下载axios插件
新建utils文件夹,新建http.js文件
import axios from "axios"; // 引入axios
// 实例化axios并设置网络延迟两秒
const instance = axios.create({
timeout: 2000,
});
// 设置post请求头
instance.defaults.headers.post["Content-Type"] =
"application/json;charset=utf-8";
// 请求拦截器
instance.interceptors.request.use(
// 请求数据接口之前的一些逻辑操作,例如:判断token是否存在、配置请求头
(config) => {
//设置请求头
if (localStorage.getItem("token")) {
config.headers.common["token"] = localStorage.getItem("token");
}
return config;
},
(error) => Promise.reject(error)
);
// 响应拦截器
instance.interceptors.response.use(
(res) => {
// 响应回来的数据,做一些逻辑操作
console.log(res);
},
// 失败做的一些逻辑
(error) => Promise.error(error.response)
);
// 导出二次封装的axios
export default instance;
在main.js中挂载全局对象
import { createApp } from "vue";
import App from "./App.vue";
import http from "@/utils/http";
const app = createApp(App); // 实例化app
app.config.globalProperties.$http = http; // 在全局挂载二次封装的axios
app.mount("#app");
在文件中使用
<script>
export default {
methods: {
addList(){
this.$http.post("/路径").then(res => {
console.log(res)
})
}
},
};
</script>