封装axios
1.在项目中安装aixos
npm install axios
2.创建request.js文件用于配置请求拦截和请求响应
import axios from "axios";
import { Message } from "element-ui";
const service = axios.create({
timeout: 3 * 1000,
});
service.interceptors.request.use(
(config) => {
config.data = JSON.stringify(config.data);
const token = window.localStorage.getItem("userInfo");
if (token) {
config.headers.token = token;
}
return config;
},
(error) => {
Promise.reject(error);
}
);
service.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = "错误请求";
break;
case 401:
error.message = "未授权,请重新登录";
break;
case 403:
error.message = "拒绝访问";
break;
case 404:
error.message = "请求错误,未找到该资源";
break;
case 405:
error.message = "请求方法未允许";
break;
case 408:
error.message = "请求超时";
break;
case 500:
error.message = "服务器端出错";
break;
case 501:
error.message = "网络未实现";
break;
case 502:
error.message = "网络错误";
break;
case 503:
error.message = "服务不可用";
break;
case 504:
error.message = "网络超时";
break;
case 505:
error.message = "http版本不支持该请求";
break;
default:
error.message = `连接错误${error.response.status}`;
}
} else {
if (JSON.stringify(error).includes("timeout")) {
Message.error("服务器响应超时,请刷新当前页");
}
error.message = "连接服务器失败";
}
Message.error(error.message);
return Promise.resolve(error.response);
}
);
export default service;
2.创建http.js文件用于放送请求
import service from "./index.js";
export const request = ({ methodType, url, dataParams }) => {
methodType = methodType.toUpperCase();
dataParams = dataParams || "";
let requestConfig = {
method: methodType,
url,
};
switch (methodType) {
case "POST":
case "PUT":
case "DELETE":
requestConfig.headers = { "Content-Type": "application/json" };
requestConfig.data = dataParams;
break;
case "GET":
requestConfig.headers = {
"Content-Type": "application/x-www-form-urlencoded",
};
requestConfig.params = dataParams;
break;
case "UPLOAD":
requestConfig.headers = { "Content-Type": "application/form-data" };
requestConfig.method = "POST";
requestConfig.data = dataParams;
break;
case "DOWNLOAD":
requestConfig.headers = {
"Content-Type": "application/x-www-form-urlencoded",
};
requestConfig.method = "GET";
requestConfig.params = dataParams;
requestConfig.responseType = "blob";
break;
case "GETIMAGE":
requestConfig.headers = { "Content-Type": "application/json" };
requestConfig.method = "GET";
requestConfig.params = dataParams;
requestConfig.responseType = "blob";
break;
default:
requestConfig.headers = { "Content-Type": "application/json" };
requestConfig.method = "POST";
requestConfig.data = dataParams;
break;
}
return service(requestConfig);
};
3.使用http.js 发送请求(建议给每个模块单独创创建不同的api文件方便维护管理)
import { request } from "@/request/http.js";
export function getResourceListTree() {
return request({
methodType: "get",
url: `${这里使用你需要BASE_URL}/gxtResListEntity/getResourceListTree`,
dataParams: "",
});
}```