sd.js 2.0封装:更加简化请求传参内容
生活随笔
收集整理的這篇文章主要介紹了
sd.js 2.0封装:更加简化请求传参内容
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
sd.js?
import $global from "./global";
import $g from "./sg";
import $ from "jquery";
import {Message, Loading} from "element-ui";//引入餓了么相關(guān)組件
import {Base64} from "js-base64"; //cnpm i --save js-base64 & cnpm i --save
//import axios from 'axios';const isLocal = location.href.includes("localhost") || location.href.includes("127.0.0.1") || location.href.includes("192.168"); //是否本地運(yùn)行
//常用路徑----------------------------------------------------------------
// const API_ROOT_URL = "//xxx.xxx.com/api"; //發(fā)布到服務(wù)器用這個(gè),遠(yuǎn)程測試服務(wù)器
const API_ROOT_URL = "/api"; //本地代理測試服務(wù)器if (isLocal) {var isLocalAPI = API_ROOT_URL.includes("localhost") || API_ROOT_URL.includes("127.0.0.1") || API_ROOT_URL.includes("192.168");Message.error(`測試環(huán)境:${isLocalAPI ? "本地" : "遠(yuǎn)程服務(wù)器"}API`);
}// 常量----------------------------------------
const website = {clientId: "xxx",clientSecret: "xxx"
};
//主體請求----------------------------------------------------------------
export default {//API URL????????????????????????????????// 公共方法________________________________________________//API FUNCTION ????????????????????????????????load: {},// 顯示加載動(dòng)畫loading(text = "加載中…", name) {this.load && (this.load[name] = Loading.service({text}));},// 顯示加載動(dòng)畫hideLoading(name) {this.load && this.load[name] && this.load[name].close();},// 錯(cuò)誤提示errorTip(where, d, url) {Message.error("【可能是" +where + "報(bào)錯(cuò)】\n\r" +"接口地址:" + url + "\n\r" +"返回報(bào)文:" + JSON.stringify(d, null, 4));},// 跳轉(zhuǎn)到登錄頁面jumpLoginPage(todo = false) {if (!location.hash.includes("/login")) {if (todo) {Message.success("已退出");} else {var token = $g.cookie.get("token"); //獲取tokenMessage.error(token ? "登錄狀態(tài)已過期,請重新登錄!" : "您還未登錄,請登錄后操作!");// alert(token ? "登錄狀態(tài)已過期,請重新登錄!" : "您還未登錄,請登錄后操作!");}$g.cookie.clearAll();var storageKey = $global.config.storageKey;localStorage.removeItem(storageKey);var url = location.href.split("#")[0] + "#/login?url=" + encodeURIComponent(location.href);location.replace(url);}},// 獲取當(dāng)前用戶名/* getUserName() {var up = localStorage.getItem($global.config.storageKey); //獲取本地保存的用戶名和密碼if (up) {up = up.split($global.config.splitStr);return Base64.decode(up[0]);} else {this.jumpLoginPage();}}, *///API FUNCTION ????????????????????????????????__sd(url, data, doing = {}, otherConfig = {}, type) {//別名轉(zhuǎn)義 ----------------------------------------------------------------doing.s && (doing.success = doing.s); //精簡別名doing.f && (doing.fail = doing.f); //精簡別名doing.e && (doing.error = doing.e); //精簡別名typeof doing.l === "string" ? this.loading(doing.l, url) : (doing.l && (doing.loading = doing.l)); //精簡別名[加載]// ----------------------------------------------------------------var token = $g.cookie.get("token"); //獲取token//noAutoToken=true代表該接口無需保持登錄狀態(tài)就可以獲取信息,譬如一些公共對外開放的接口if (!otherConfig.noAutoToken) {data || (data = {});if (token) {data["Blade-Auth"] = "bearer " + token;} else {doing.loading && doing.loading.close(); //關(guān)閉加載// 如果本地沒有tokenif (location.href.includes("/login")) {} else {//判斷如果不是在登錄頁,且本地沒有token或者token里面沒有用戶名和密碼,則直接跳轉(zhuǎn)到登錄頁面return this.jumpLoginPage();}}}// ----------------------------------------------------------------var headers = {"Content-Type": data["Content-Type"] || "application/x-www-form-urlencoded","Authorization": `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`//所有頁面都要Authorization};data["Blade-Auth"] && (headers["Blade-Auth"] = data["Blade-Auth"]);if (data) {var contentType = data["Content-Type"];delete data["Content-Type"];delete data["Authorization"];delete data["Blade-Auth"];if (location.href.includes("/login")) {$g.cookie.clearAll();}if (contentType === "application/json") {data = JSON.stringify(data);}}doing.loading && doing.loading.show && doing.loading.show(); //顯示加載動(dòng)畫$.ajax({timeout: 10 * 60 * 1000, //設(shè)置默認(rèn)超時(shí)時(shí)間10分鐘type: type || "POST",url,data,headers,success: d => {doing.loading && doing.loading.close(); //關(guān)閉加載this.hideLoading(url); //關(guān)閉加載switch (d.code) {case 200: //登錄成功 ? ? ? ? ? ? ? ?d.data && d.data.accessToken && (token = d.data.accessToken); //更新token$g.cookie.setByMinute("token", token, 60); //存儲(chǔ)到本地60分鐘的保存時(shí)間doing.success && doing.success(otherConfig.isGetAllData ? d : (d.data || d));break;case 401: //token失效 ? ? ? ?this.jumpLoginPage();doing.fail && doing.fail(d);break;case -1: //請求失敗 ? ? ? ?default: //請求失敗 ? ? ? ?doing.fail ? doing.fail(d) : Message.error(d.msg);console.log("【報(bào)錯(cuò)】" + JSON.stringify(d, null, 4));break;}},error: d => { //請求報(bào)錯(cuò) ? ? ? ?doing.loading && doing.loading.close(); //關(guān)閉加載this.hideLoading(url); //關(guān)閉加載doing.error ? doing.error(d) : this.errorTip("后端邏輯", d, url);console.log("【報(bào)錯(cuò)】" + JSON.stringify(d, null, 4));}});},//????????????????????????????????//登錄接口login(data, doing) {this.__sd(API_ROOT_URL + "/login/token", data, doing, {noAutoToken: true});},// 例子************************************************demo(data = {}, doing) {data["Content-Type"] = "application/json";this.__sd(API_ROOT_URL + "/api-data/query ", data, doing, {}, "post");}, // ----------------------------------------
};
使用demo?
//精簡模式----------------------------------------
var d = { id: 1 };this.$d.API(d, {//l: { show: () => (this.loading = true), close: () => (this.loading = false), },s: (d) => {console.log("【成功】", d);}
});//一般模式----------------------------------------
var d = { param: "參數(shù)值", pageNum: 0 };this.$d.API_NAME(d, {l: "加載中…",//l: { show: () => (this.loading = true), close: () => (this.loading = false), },s: (d) => {console.log("【成功】", d);} //,f:d=> this.$message.error(d.msg),});
總結(jié)
以上是生活随笔為你收集整理的sd.js 2.0封装:更加简化请求传参内容的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Vue子组件调用父组件方法并传参的5种方
- 下一篇: 【强哥推荐】VSCode常用快捷键配置文