Vue.mixin({ methods: { isNotEmptyString:function (s){return (typeof s==='string' && s.length)}, getURL:function(){ return location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '')}, ajax(bridge,param=false){ let method='GET'; let parseJSON=(json)=>{ try{ let rep=JSON.parse(json); return rep; }catch(e){ console.log("ERROR:: xhr.parse : JSON MAL FORMÉ"); return false; } } // si on a une method particulière if(this.isNotEmptyString(param.method)) method=param.method; let p=new Promise((res,rej)=>{ try{ if(!this.isNotEmptyString(bridge)){ throw 'ERROR:: ajax : url de bridge attendu, requête échouée'; } let objectToFormData = (data = {}, form = null, namespace = '')=> { let files = {}; let model = {}; for (let propertyName in data) { if (data.hasOwnProperty(propertyName) && data[propertyName] instanceof File) { files[propertyName] = data[propertyName] } else { model[propertyName] = data[propertyName] } } model = JSON.parse(JSON.stringify(model)) let formData = form || new FormData(); for (let propertyName in model) { if (!model.hasOwnProperty(propertyName) || !model[propertyName]) continue; let formKey = namespace ? `${namespace}[${propertyName}]` : propertyName; if (model[propertyName] instanceof Date) formData.append(formKey, model[propertyName].toISOString()); else if (model[propertyName] instanceof File) { formData.append(formKey, model[propertyName]); } else if (model[propertyName] instanceof Array) { model[propertyName].forEach((element, index) => { const tempFormKey = `${formKey}[${index}]`; if (typeof element === 'object') objectToFormData(element, formData, tempFormKey); else formData.append(tempFormKey, element.toString()); }); } else if (typeof model[propertyName] === 'object' && !(model[propertyName] instanceof File)) objectToFormData(model[propertyName], formData, formKey); else { formData.append(formKey, model[propertyName].toString()); } } // console.log(formData.keys()) for (let propertyName in files) { if (files.hasOwnProperty(propertyName)) { formData.append(propertyName, files[propertyName]); } } return formData; }; let convertToString=(fd)=>{ let encodedString = ''; let amperSand=''; fd.forEach(function(value, key){ encodedString +=`${amperSand}${key}=${encodeURIComponent(value)}`; amperSand='&'; }); return encodedString; }; if(method==='GET'){ if(!param) param={}; if(!param.data) param.data={}; } // on compose les données à envoyer POST ou GET let formData=new FormData(); if(param.data) formData=objectToFormData(param.data); // on converti en string pour être plus userfriendly dans la console du navigateur let stringToSend=convertToString(formData); // on ajoute les paramètres d'URL à l'URL if(method==='GET') bridge+='?'+stringToSend let xhr = new XMLHttpRequest(); xhr.open(method, bridge, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload=function(){ // Si tout va bien if(this.readyState===4 && this.status===200){ var rep=parseJSON(this.responseText); if(rep){ res(rep); return; } rej(); return; } // // Les réponses ERREURS if(this.readyState===4 && this.status===503){ let err='ERROR:: ajax : erreur 503 ['+bridge+'] non autorisé'; console.log(`%c ${err}`,'background:red;color:#fff,font-weight:bold'); rej(err); return; } if(this.readyState===4 && this.status===500){ let err='ERROR:: ajax : erreur 500 ['+bridge+'] erroné'; console.log(`%c ${err}`,'background:red;color:#fff,font-weight:bold'); rej(err); return; } if(this.readyState===4 && this.status===404){ let err='ERROR:: ajax : erreur 404 ['+bridge+'] non trouvé'; console.log(`%c ${err}`,'background:red;color:#fff,font-weight:bold'); rej(err); return; } if(this.readyState===4){ let rep = parseJSON(this.responseText); let mess = this.status===204 ? "Il n'y à aucune donnée" : rep.message; let err='ERROR:: ajax : '+this.status+' '+this.statusText+' : '+mess; if(err){ res(err); return; } rej(); return; } }; xhr.onerror = function () { console.log('ERROR:: ajax :'); console.log(xhr); rej('ERROR:: erreur AJAX inconnue'); }; xhr.send(stringToSend); } catch(e){ console.log(e); rej(e); } }); return p; } } })