创建api文件夹
1、在api文件夹创建index.js
export * from './interface';
2、在api文件夹创建request.js
import axios from 'axios';
import { ElMessage } from 'element-plus';
let _global = typeof self === "undefined" ? typeof global === "undefined" ? this : global : self;
let typeOfTest = type => thing => typeof thing === type;
let isUndefined = typeOfTest('undefined');
let isContextDefined = (context) => !isUndefined(context) && context !== _global;
let { isArray } = Array;
function isPlainObject(val){
return val && val.constructor.name === 'Object'
}
function merge() {
let {caseless} = isContextDefined(this) && this || {};
let result = {};
let assignValue = (val, key) => {
let targetKey = caseless && findKey(result, key) || key;
if (isPlainObject(result[targetKey]) && isPlainObject(val)) {
result[targetKey] = merge(result[targetKey], val);
} else if (isPlainObject(val)) {
result[targetKey] = merge({}, val);
} else if (isArray(val)) {
result[targetKey] = val.slice();
} else {
result[targetKey] = val;
}
}
for (let i = 0, l = arguments.length; i < l; i++) {
arguments[i] && forEach(arguments[i], assignValue);
}
return result;
}
function forEach(obj, fn, {allOwnKeys = false} = {}) {
if (obj === null || typeof obj === 'undefined') {
return;
}
let i;
let l;
if (typeof obj !== 'object') {
obj = [obj];
}
if (isArray(obj)) {
for (i = 0, l = obj.length; i < l; i++) {
fn.call(null, obj[i], i, obj);
}
} else {
let keys = allOwnKeys ? Object.getOwnPropertyNames(obj) : Object.keys(obj);
let len = keys.length;
let key;
for (i = 0; i < len; i++) {
key = keys[i];
fn.call(null, obj[key], key, obj);
}
}
}
let statusText = {
0: "请求状态为0,请求超时",
400: "请求状态为400,服务器未能理解请求",
404: "请求状态为404,服务器无法找到被请求的页面",
405: "请求状态为405,请求中指定的方法不被允许",
500: "请求状态为500,服务器遇到不可预知的情况",
502: "请求状态为502,服务器从上游服务器收到一个无效的响应",
}
let requestInterceptors = [
cfg => {
cfg.headers.Authorization = sessionStorage.getItem("token");
if(cfg.emulateJSON && isPlainObject(cfg.data)) {
cfg.data = buildURL('', cfg.data).substr(1);
}
return cfg;
}
]
let responseInterceptors = [
res => {
return res.data;
},
err => {
if(err.response){
ElMessage.error(statusText[err.response.status]);
}else{
ElMessage.error(statusText[err.request.status]);
}
return Promise.reject(err)
}
]
let defaults = {
baseURL: process.env.VUE_APP_REQUEST_BASEURL,
disableInterceptor: true,
timeout: 5 * 60 * 1000,
}
export let serviceCreate = config => {
let service = axios.create(merge(defaults, config));
service.interceptors.request.use(...requestInterceptors);
service.interceptors.response.use(...responseInterceptors);
return service;
}
export { merge };
export let service = serviceCreate();
3、在api文件夹创建interface.js
import { serviceCreate, merge } from './request';
let http = serviceCreate({
baseURL: process.env.NODE_ENV === 'production' ? "生产/正式环境" : "开发/本地环境",
})
export function get(params, config) {
return http.get('/get/getList', merge(config,{ params }));
}
export function post(data, config) {
return http.post('/post/postList', data, merge(config, { emulateJSON: false }));
}
export function put(data, config) {
return http.put('/put/putList', data, merge(config, { emulateJSON: false }));
}
export function del(params, config) {
return http.delete('/del/delList', merge(config,{ params }));
}