axios提交数据前拦截并对formData数据进行转换提交

使用axios进行ajax提交数据时，进行数据拦截整理后再提交，可很好的帮助我们在开发过程中实现前后端数据交互工作，尤其是前端接口不统一，有时以对象提交，有时又formData提交导致数据不统一等问题。另在vue环境下，当使用formData收集数据并提交给后端时，会出现空值、未定义值在传输过程中被转换为"null"，后端接收数据无法判断等问题。如果使用axiso拦截并整理formData数据为对象后再进行提交可完美规避该问题，且以post body更利于后端接收和判断。 这里提交了三种形式，可供参考，其中get形式以url进行传输，所有值均为被转为字符型，post方式可完全保留数据类型，upload形式则以formData形式提交，如果源数据为对象则转换成formData，同时数据类型也将转换为字符型。 其中post方法使用了formData遍历获取数据，避免formData中有同样值，导致数据丢失或只能获取数组的第一个值的问题，获取后将其转换为数组形式 **1.get方法提交，使用URLSearchParams方法将数据转换为URL形式** ``` function get(url, params={},progress=null) {/*网络get请求 *  url:请求地址 *  params:参数 */     return new Promise((resolve, reject) => {         httpService({             url: url,             method: 'get',             params: new URLSearchParams(params),             onUploadProgress:progressEvent =>  {if(progress){return progress(progressEvent)}else{onProgress(progressEvent)}},             onDownloadProgress:progressEvent =>  {if(progress){return progress(progressEvent)}else{onProgress(progressEvent)}},         }).then(response => {             resolve(response);         }).catch(error => {             reject(error);         });     }); } ``` **2.post方法提交,这里使用了循环获取，避免formData中有同样值，获取后将其转换为数组形式** ``` function post(url, params={},progress=null) {     return new Promise((resolve, reject) => {         if(params instanceof FormData){             var object = {};             params.forEach((value,key,map)=>{                 if(!object[key]){                     object[key] = value;                 }else if(object[key] instanceof Array){                     object[key].push(value);                 }else{                     object[key]=[object[key],value];                 }             });             params = object;         }         httpService({             url: url,             method: 'post',             data: params,             onUploadProgress:progressEvent =>  {if(progress){return progress(progressEvent)}else{onProgress(progressEvent)}},             onDownloadProgress:progressEvent =>  {if(progress){return progress(progressEvent)}else{onProgress(progressEvent)}},         }).then(response => {             resolve(response);         }).catch(error => {             reject(error);         });     }); } ``` **3.upload方法，如果数据为非formData，则转换为formData进行提交** ``` function upload(url, params={},progress=null) {     return new Promise((resolve, reject) => {         if(!(params instanceof FormData)){             var object = new FormData;             for(var i in params){object.append(i,params[i])}             params = object;         }         httpService({             url: url,             method: 'post',             data: params,             headers: { 'Content-Type': 'multipart/form-data' },             onUploadProgress:progressEvent =>  {if(progress){return progress(progressEvent)}else{onProgress(progressEvent)}}             onDownloadProgress:progressEvent =>  {if(progress){return progress(progressEvent)}else{onProgress(progressEvent)}},         }).then(response => {             resolve(response);         }).catch(error => {             reject(error);         });     }); } ```