sd.js源码
import $g from "./sg";//vue项目使用 import $ from 'jquery';//(提示:原生开发页面请前往https://jquery.com下载最新版jQuery) import { Message } from "element-ui";//element项目使用 let isLocal = [ "localhost", "127.0.0.1", "192.168", "0.0.0.0", ].some(v => location.href.includes(v)); //是否本地运行 //常用路径________________________________________________________________________________ let API_ROOT_URL = "http://xxx.xxx.com/api"; //生产的IP if (isLocal) { API_ROOT_URL = "//192.168.1.xxx:8088/api"; //本地联调时候,开发者xxx的IP } //一些前提条件和方法________________________________________________________________________________ //跳转到登录页面 let jumpLoginPage = () => { $g.cookie.clearAll();//清空所有缓存(需要引入sg.js) Object.keys(localStorage).forEach(k => delete localStorage[k]);//清空对象键、值 location.hash.includes('/login') || location.replace(`${location.origin}${location.pathname}#/login?url=${encodeURIComponent(location.href)}`); } // 普通报错提示 let sgAlert = (d) => Message ? Message.error(d) : alert(d); // 报错提示 let errAlert = (url, d) => sgAlert(`【可能是后端报错】\n\r【接口地址】${url}\n\r【返回报文】${JSON.stringify(d, null, 4)}`); //主体请求________________________________________________________________________________ export default { // 一些共享出去的变量 $g, isLocal, API_ROOT_URL, imgPrePath: API_ROOT_URL + '/', // 一些共享出去的方法 jumpLoginPage, //API FUNCTION ________________________________________________________________________________ __sd(type, url, data, doing, otherConfig = {}) { // delete (data || {}).sgLog;//清除调试状态下的接口标记说明字段 type || (type = 'POST'); //noAutoToken=true代表该接口无需保持登录状态就可以获取信息,譬如一些公共对外开放的接口 let token = localStorage.token; //获取token if (!otherConfig.noAutoToken) { //判断如果本地没有token,否者直接跳转到登录页面 if (!token) return jumpLoginPage(); } let headers = { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',//FormData方式提交数据 }; if (!otherConfig.noAutoToken) { token && (headers["kkToken"] || (headers["kkToken"] = token)); data || (data = {}); } // 防止下载导出文件乱码 let xhrFields = otherConfig.isDownload ? { xhrFields: { responseType: "arraybuffer" } } : null; // 序列化设置(是否将数据转换为查询字符串的形式发送给服务器,默认情况下,processData的值为true) let processData = true; (data instanceof FormData) && (processData = false); (typeof otherConfig.processData !== 'undefined') && (processData = otherConfig.processData); // 精简别名 doing.s && (doing.success = doing.s); //响应请求成功 doing.f && (doing.fail = doing.f); //响应请求失败 doing.e && (doing.error = doing.e); //响应请求报错 doing.l && (doing.loading = doing.l, doing.loading.show && doing.loading.show()); //加载 $.ajax({ timeout: 10 * 60 * 1000, //设置默认超时时间10分钟 type, url, ...xhrFields, data, headers, processData, success: d => { // typeof d === 'string' && (d = JSON.parse(d));//如果是字符串返回值,则转换为JSON格式 doing.loading && doing.loading.close && doing.loading.close(); //关闭加载 if (otherConfig.isDownload) return doing.success(d); //如果是下载,直接返回文档流 switch (d.success) { case true: //登录成功 doing.success && doing.success(otherConfig.isGetAllData ? d : (d.data || d)); break; case false: //登录失败(当token密码失效的时候) doing.fail ? doing.fail(d) : sgAlert(d.msg); break; } switch (d.code) { case 403: //登录失败(当token密码失效的时候) case 404: //登录失败(当token密码失效的时候) jumpLoginPage(); doing.fail ? doing.fail(d) : sgAlert(d.msg); break; case -2: //扫码失败 case -1: //请求失败 doing.fail ? doing.fail(d) : sgAlert(d.msg); break; } }, error: d => { //请求报错 if (d.status == 403) { jumpLoginPage(); return doing.error ? doing.error(d) : sgAlert(JSON.parse(d.responseText).msg); } doing.loading && doing.loading.close && doing.loading.close(); //关闭加载 doing.error ? doing.error(d) : errAlert(url, d); // console.log("【报错】" + JSON.stringify(d, null, 4),d); }, }); }, //【通用接口demo】________________________________________________________________________________ API_NAME({ data, r, config }) { this.__sd("post", `${API_ROOT_URL}/xxx/xxx/xxx`, data, r, config); }, //提交用例________________________________________ get({ r }) { this.__sd("get", `${API_ROOT_URL}/get.do`, null, r, { isGetAllData: true }); }, post({ data, r }) { this.__sd("post", `${API_ROOT_URL}/post.do`, data, r); }, login({ data, r }) { this.__sd("post", `${API_ROOT_URL}/post.do`, data, r, { noAutoToken: true }); }, download({ data, r }) { this.__sd("post", `${API_ROOT_URL}/post.do`, data, r, { isDownload: true }); }, }
调用方式
let data = { ID: 1, sgLog: `强哥请求来源:${this.$options.name}`, }; this.$d.接口名称({ data, r: { s: d => { console.log("【成功】", d); } } });
为了高效敏捷开发,写了一个基于上面的接口封装自动生成API请求代码片段的小工具