涓€绡囨枃绔犲洓涓枃浠讹紝涓€涓鏋跺伐鍏蜂竴涓伐鍏凤細axios妗嗘灦锛氫互vue涓轰緥鍥涗釜鏂囦欢鈹斺攢src鈹溾攢services//鐩綍鈹溾攢api.js//api绠＄悊鈹溾攢axios.js//axios璇锋眰鈹溾攢鈹€fetch.js//浜屾灏佽鈹溾攢request.js//璇锋眰鏂规硶绠＄悊api.js瀛樺偍鎵€鏈夋帴鍙ｈ姹俛xios.js璇锋眰鎷︽埅澶勭悊fetch.jsaxios璇锋眰鐨勪簩娆″皝瑁卹equest.js绠＄悊璇锋眰鏂规硶getpostputdelete銆?.axios.jsimportaxiosfrom'axios'import{getToken}from'@/utils/token'//axiosbaseURLaxios.defaults.baseURL=process.env.VUE_APP_BASE_APIconstinstance=axios.create({baseURL:process.env.VUE_APP_BASE_API,//instancebaseURLtimeout:6000})instance.interceptors.request.use(config=>{consttoken=getToken()token&&(config.headers['X-Access-Token']=token)returnconfig},err=>{returnPromise.reject(err)})instance.interceptors.response.use(res=>{/*閿欒澶勭悊*///......returnres},err=>{returnPromise.reject(err)})exportdefaultinstance鍒涘缓axios瀹炰緥锛屽畾涔塨aseURL锛屾垨鑰呭紑鍙戠幆澧冨拰鐢熶骇鐜浣跨敤process.env.NODE_ENV鍦ㄥ垽鏂幆澧冧箣鍓嶏紝浠庢瘡涓姹傜殑鏂囦欢涓殑'axios'瀵煎叆axios锛屾垨鑰匳ue.prototype.$axios=axios锛岀幇鍦ㄤ娇鐢?axios.get(url,params)鏃娥煈噁etch.js鍋氫竴鐐瑰鐞?***fetchData*@param{String}url璇锋眰鍦板潃*@param{String}method璇锋眰鏂规硶*@param{Object}鏁版嵁璇锋眰鍙傛暟*@returnsres.data*/importhttpfrom'./axios'importQsfrom'qs'exportconstfetchData=async(url,method,data=null)=>{lethttpOpts={url,method}httpOpts=method==='get'?{...httpOpts,params:data,paramsSerializer:params=>Qs.stringify(params,{indices:false})//搴忓垪鍖栨暟缁剗:{...httpOpts,data}try{constres=awaithttp(httpOpts)returnres.data}catch(error){returnnull}//浣跨敤.then.catch//returnhttp(httpOpts).then(res=>{//returnres.data//}).catch(err=>{//returnnull//})}鐩墠鍙鐞唃et鍜宲ost璇锋眰锛屽彲浠ユ牴鎹疄闄呮儏鍐垫坊鍔犲叾浠栬姹傛柟寮忋€俻utdelete瀵逛簬get璇锋眰锛屾暟缁勭被鍨嬬殑鍙傛暟鍦ㄨ繖閲岃搴忓垪鍖栥€傛垜浠兘鐭ラ亾axios璇锋眰鎴愬姛杩斿洖鐨勭粨鏋滀腑鎴戜滑闇€瑕佺殑鏁版嵁銆傚湪data涓紝鎵€浠ユ垜浠繖閲岀洿鎺ヨ繑鍥瀝es.data锛屾垨鑰呭湪axios鐨勫搷搴旀嫤鎴櫒涓繑鍥瀝es.datarequest.js鏃㈢劧fetch.js涓尯鍒嗕簡get鍜宲ost璇锋眰锛岄偅涔?../***璇锋眰鏂规硶*@paramurl璇锋眰鎺ュ彛璺緞*@paramdata璇锋眰鍙傛暟*@methodgetRequestget璇锋眰*@methodpostRequestpost璇锋眰*/import{fetchData}from'./fetch'exportconstgetRequest=(url,data)=>fetchData(url,'get',data)//鑾峰彇璇锋眰exportconstpostRequest=(url,data)=>fetchData(url,'post',data)//post璇锋眰//exportconstputRequest=(url,data)=>fetchData(url,'put',data)//put璇锋眰//exportconstdeleteRequest=(url,data)=>fetchData(url,'delete',data)//deleterequest鎴戜滑瀹氫箟浜唃etRequest鍜宲ostRequest鏂规硶锛岃繖涓や釜鏂规硶鍒嗗埆鎺ユ敹涓や釜鍙傛暟锛寀rl鍜宒ata锛屽苟杩斿洖涓€涓嚱鏁帮紝杩欎釜鍑芥暟鍦╢etch.js涓畾涔塮etchData锛屽皢鎺ユ敹鍒扮殑涓や釜鍙傛暟浼犵粰fetchDataapi.js锛屾渶鍚庡埌杈捐姹傛帴鍙ｉ摼鎺ワ紝鎶婃墍鏈夋帴鍙ｆ斁鍦╝pi.js閲岋紝浠庤繖閲岀鐞唕equest.js閲岀殑url鍜宒ata/***鎵€鏈夋帴鍙ｈ姹俿*/import{getRequest,postRequest}from'./request'/*loginregistration*/exportconstlogin=data=>postRequest('/login',data)exportconstregister=data=>postRequest('/register',鏁版嵁)//瀵煎嚭甯搁噺xxx=鏁版嵁=>deleteRequest('/xxx',鏁版嵁)//瀵煎嚭甯搁噺xxx=data=>putRequest('/xxx',data)/*articleinterface*/exportconstarticleList=data=>getRequest('/article/list',data)...浣跨敤import{articleList}from'@/services/api'asyncgetArticleList(){constres=awaitarticleList(params)}鐜板湪鍦ㄧ粍浠朵腑锛屾垜浠彧鍏冲績鎺ュ彛闇€瑕佷紶閫掔殑鍙傛暟锛屼笉闇€瑕佸啓璇锋眰璺緞鍜岃姹傛柟娉曪紝杩欎簺閮芥槸浜ょ粰涓婇潰4鏂囦欢澶勭悊鐨勬暣浣撴祦绋嬪垱寤轰竴涓猘xios瀹炰緥鏍规嵁璇锋眰鏂规硶锛屽璇锋眰杩涜杞诲井鐨勫鐞嗭紝灏嗚姹傜粨鏋滆繑鍥炵粰瀹氫箟涓嶅悓璇锋眰鏂规硶鐨勬柟娉曟墍瑕佷娇鐢ㄧ殑鏂规硶灏卞浜嗭紝鍙渶瑕佸叧蹇冨弬鏁帮紝涓嶅啀鍏冲績鍏朵粬
