二次封装ajax和axios

ajax

app.config.globalProperties.$http = function(url, method, data, async, fun) {$.ajax({url: baseUrl + url, //请求地址type: method,   //请求方式dataType: 'json',  //数据类型contentType: "application/json",xhrFields: {  //跨域设置withCredentials: true},headers: {"token":localStorage.getItem("token") //请求头设置token验证},async: async,  //开启异步请求 true/falsedata: JSON.stringify(data),  //携带数据转换为字符串success: function(resp) {  //请求成功后的操作if (resp.code == 200) {fun(resp)} else {ElMessage.error({message: resp.msg,duration: 1200});}},error: function(e) {  //请求失败后的操作if (e.status == undefined) {ElMessage.error({message: "前端页面错误",duration: 1200});} else {let status = e.statusif (status == 401) {router.push({name: 'Login'})} else {ElMessage.error({message: e.responseText,duration: 1200});}}}})
}

axios

/对于axios函数库进行二次封装
//你工作的时候axios是否进行二次封装？
// 目的1：利用axios请求，响应拦截器功能
// 目的2：请求拦截器，一般看可以在请求头中携带公共参数：token
// 目的3：响应拦截器，可以简化服务返回的数据，处理http的网络错误
import axios from "axios";
import { ElMessage } from "element-plus";//利用axios.create方法创建一个axios实例：可以设置基础路径、超时时间的设置
const request = axios.create({baseURL: "/api", //请求路径设置timeout: 5000, // 超时的时间设置，超出五秒请求就是失败的
});// 请求拦截器
request.interceptors.request.use((config) => {//config:请求拦截器回调注入的对象(配置对象)，配置对象的身上最重要的一件事就是headers属性//可以通过请求头携带公共参数-tokenreturn config;
});request.interceptors.response.use((response) => {//响应拦截器成功的回调，一般会进行简化数据return response.data;},(error) => {// 处理http网络错误let status = error.response.status;switch (status) {case 404://错误提示信息ElMessage({type: "error",message: "请求失败路径出现问题",});break;case 500 | 501 | 502 | 503 | 504 | 505://错误提示信息ElMessage({type: "error",message: "服务器挂了",});break;case 401:ElMessage({type: "error",message: "参数有误",});break;}return Promise.reject(new Error(error.message));}
);export default request;