目录
一次封装
1.axios大家都应该很了解了,在React和Vue中广泛应用进行请求数据,那么为什么还需要对其封装呢,如果后端解决跨域了的话,我们是可以通过请求时携带请求头来解决跨域。那么对于这些重复的请求头就可以通过封装axios进行减少重复的请求地址,请求头。
import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
const service = axios.create({
baseURL: 'http://43.138.58.236',
timeout: 5000,
});
service.interceptors.request.use(
(config) => {
Message.success('loading')
return config;
},
);
service.interceptors.response.use(
(response) => {
Message.closeAll()
const res = response.data;
if(res.code==400){
Message.error('请求失败')
}
},
(error) => {
Message({
message: error.message,
type: "error",
duration: 5 * 1000,
});
return Promise.reject(error);
}
);
export default service;
可以看到 我想向外暴露了service这个函数,service这个函数调用了axios.create这个方法,传递了baseUrl这个参数,这样每次请求都会携带上这个网址,service.interceptors.request.use对请求前进行操作,通过message显示一个loading,告诉用户正在加载,service.interceptors.response.use请求结果回来后进行操作,通过Message.closeAll()清除所有message。如果返回的code是400,告诉用户请求失败。
二次封装
二次封装主要就是对请求进行一个集中式的管理,在src跟目录创建api文件夹,在api中创建index.js,
引入刚才的封装。
import request from "@/util/request";
export const GetCategoryList = () =>
request({ url: "/product/getBaseCategoryList", method: "get" });
在main.js中引入import * as api from '@/api',Vue.prototype.api = api 往Vue实例本身绑定,所有组件都可使用