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/false
data: 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.status
if (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属性
//可以通过请求头携带公共参数-token
return 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;
ajax
app.config.globalProperties.$http = function
阅读背景：
二次封装ajax和axios
来源：互联网
分享到：
