鏈枃鐨勬€濊矾鏉ユ簮浜庡瀹為檯椤圭洰閲嶆瀯鐨勬€荤粨銆傛杩庢寚姝ｅ拰浜ゆ祦銆傚鏋滃鎮ㄦ湁甯姪锛岃鐐硅禐馃憤鏀惰棌鏀寔銆傛渶杩戦噸鏋勪簡涓€涓€侀」鐩紝鍙戠幇澶勭悊璇锋眰鐨勬嫤鎴櫒姣旇緝涔憋紝浜庢槸閲嶆瀯浜嗘暣涓」鐩殑璇锋眰澶勭悊灞傦紝鐩墠鍦ㄩ」鐩腑杩愯姝ｅ父銆傛湰鏂囧皢涓庡ぇ瀹跺垎浜垜鐨勯噸鏋勬€濊矾鍜屽悗缁殑浼樺寲鎬濊矾銆備负浜嗘柟渚垮垎浜粰澶у锛屾垜浣跨敤Vue3瀹炵幇浜嗕竴涓畝鍗曠殑demo銆傛兂娉曟槸涓€鏍风殑銆傛湁鍏磋叮鐨勬湅鍙嬪彲浠ュ埌鎴戠殑Github涓婃煡鐪嬨€傛湰鏂囧皢浠ヨ繖涓猇ue瀹炵幇鐨刣emo涓轰緥杩涜浠嬬粛銆傚湪鏈枃涓紝鎴戝皢涓昏涓庡ぇ瀹跺垎浜互涓嬪嚑鐐癸細闂鍒嗘瀽涓庢柟妗堣璁★紱閲嶆瀯鍚庣殑鏁堟灉锛涘紑鍙戣繃绋嬶紱鍚庢湡浼樺寲鐐癸紱濡傛灉浣犺繕涓嶇煡閬撲粈涔堟槸HTTP璇锋眰鍜屽搷搴旀嫤鎴櫒锛屽彲浠ュ厛鐪嬬湅銆備竴銆侀渶姹傛€濈淮涓庣▼搴忚璁?銆侀棶棰樺垎鏋愮洰鍓嶈€侀」鐩凡缁忔湁寰堝鍚屼簨寮€鍙戜簡銆傝鎷︽埅鍣ㄥ瓨鍦ㄤ互涓嬮棶棰橈細浠ｇ爜娣蜂贡锛屽彲璇绘€у樊锛涘悇涓嫤鎴櫒鑱岃矗娣蜂贡锛岀浉浜掍緷璧栵紱瀛樺湪閫昏緫闂锛涘洟闃熷唴涓嶅悓椤圭洰鏃犳硶澶嶇敤锛?銆佹柟妗堣璁＄粡杩囧垎鏋愪互涓婇棶棰橈紝鎴戠殑鍒濇鏂规鏄細鍙傝€冩彃浠舵灦鏋勮璁★紝灏嗗悇涓嫤鎴櫒鍒嗙锛屽皢鍚勪釜鎷︽埅鍣ㄥ垎绂诲埌涓€涓崟鐙殑鏂囦欢涓繘琛岀淮鎶ゃ€傝亴璐ｅ崟涓€锛岀劧鍚庨€氳繃鎷︽埅鍣ㄨ皟搴﹀櫒杩涜璋冨害鍜屾敞鍐屻€傛嫤鎴櫒璋冨害娴佺▼濡備笅鍥炬墍绀猴細2.閲嶆瀯鍚庢晥鏋滀唬鐮佸叾瀹炴瘮杈冪畝鍗曘€傚厛鏉ョ湅鐪嬫渶缁堢殑瀹炵幇鏁堟灉锛?銆佺洰褰曞眰娆℃洿鍔犳竻鏅般€傞噸鏋勫悗锛岃姹傚鐞嗗眰鐨勭洰褰曞眰娆℃洿鍔犳竻鏅帮紝澶ц嚧濡備笅锛?.鎷︽埅鍣ㄥ紑鍙戯紝鏇存柟渚垮悗缁笟鍔″紑鍙戞柊鐨勬嫤鎴櫒銆傚彧闇€瑕?姝ュ氨鍙互瀹屾垚鎷︽埅鍣ㄧ殑寮€鍙戝拰浣跨敤銆傛嫤鎴櫒璋冨害鍣ㄤ細鑷姩璋冪敤鎵€鏈夌殑鎷︽埅鍣細3.姣忎釜鎷︽埅鍣ㄨ亴璐ｅ鍗曚竴銆佸彲鎻掓嫈姣忎釜鎷︽埅鍣ㄩ兘鎶芥垚涓€涓枃浠舵潵瀹炵幇锛岃姣忎釜鎷︽埅鍣ㄧ殑鑱岃矗鍒嗙銆佸崟涓€銆傚綋涓嶉渶瑕佹煇涓嫤鎴櫒鏃讹紝鍙互闅忔椂鏇存崲锛屾彃鎷旂伒娲汇€?.寮€鍙戣繃绋嬭繖閲屾槸鎴戝崟鐙彁鍙栫殑demo宸ョ▼鐨勪緥瀛愩€?.鍒濆鍖栫洰褰曠粨鏋勬牴鎹墠闈㈢殑璁捐锛岄鍏堥渶瑕佸湪椤圭洰涓垱寤轰竴涓洰褰曠粨鏋勶細-request-index.js//鎷︽埅鍣ㄨ皟搴﹀櫒-interceptors-request//鐢ㄤ簬瀛樻斁姣忎釜璇锋眰鎷︽埅鍣?index.js銆俲s//绠＄悊鎵€鏈夌殑璇锋眰鎷︽埅鍣ㄥ苟鎺掑簭-response//鐢ㄦ潵瀛樻斁姣忎釜鍝嶅簲鎷︽埅鍣?index.js//绠＄悊鎵€鏈夌殑鍝嶅簲鎷︽埅鍣ㄥ苟鎺掑簭2.瀹氫箟鎷︽埅鍣ㄨ皟搴﹀櫒鍥犱负椤圭洰浣跨敤浜哸xios璇锋眰搴擄紝鎵€浠ユ垜浠渶瑕佹兂鐭ラ亾axios鎷︽埅鍣ㄧ殑浣跨敤鏂规硶锛岃繖閲岀畝鍗曠湅涓媋xios鏂囨。涓婃嫤鎴櫒鐨勪娇鐢ㄦ柟娉曪細//娣诲姞璇锋眰鎷︽埅鍣╝xios.interceptors.request.use(function(config){//涓氬姟閫昏緫returnconfig;},function(error){//涓氬姟閫昏緫returnPromise.reject(error);});//娣诲姞鍝嶅簲鎷︽埅鍣╝xios.interceptors.response.use(function(response){//涓氬姟閫昏緫returnresponse;},function(error){//涓氬姟閫昏緫returnPromise.reject(error);});浠庝笂闈㈢殑浠ｇ爜鎴戜滑鍙互鐭ラ亾锛屽湪浣跨敤鎷︽埅鍣ㄧ殑鏃跺€欙紝鎴戜滑鍙渶瑕佸湪axios.interceptors瀵硅薄涓婅皟鐢ㄧ浉搴旂殑鏂规硶鍗冲彲锛屾墍浠ユ垜浠彲浠ユ彁鍙栧嚭杩欐閫昏緫锛?/src/request/interceptors/index.jsimport{log}鏉ヨ嚜'../鏃ュ織'锛涗粠'./request/index'瀵煎叆璇锋眰锛涗粠'./response/index'瀵煎叆鍝嶅簲锛沞xportconstrunInterceptors=instance=>{log('[runInterceptors]',instance);濡傛灉锛堬紒瀹炰緥锛夎繑鍥?//涓?constkeyinrequest)璁剧疆璇锋眰鎷︽埅鍣▄instance.interceptors.request.use(config=>request[key](config));}//璁剧疆鍝嶅簲鎷︽埅鍣╢or(constkeyinresponse){instance.interceptors.response.use(result=>response[key](result));}returninstance;}杩欐槸鎴戜滑鐨勬牳蹇冩嫤鎴櫒璋冨害鍣ㄣ€傚鍏ユ墍鏈夎姹傛嫤鎴櫒鍜屽搷搴旀嫤鎴櫒鍚庯紝閫氳繃for寰幆锛屾敞鍐屾墍鏈夋嫤鎴櫒锛屾渶鍚庤繑鍥炴暣涓猘xios瀹炰緥3.瀹氫箟绠€鍗曠殑璇锋眰鎷︽埅鍣ㄥ拰鍝嶅簲鎷︽埅鍣ㄨ繖閲屾垜浠仛涓€涓畝鍗曠殑婕旂ず锛屽垱寤哄涓嬩袱涓嫤鎴櫒锛氳姹傛嫤鎴櫒锛歴etLoading锛岀敤浜庡湪鍙戣捣璇锋眰鍓嶏紝鏄剧ず涓€涓叏灞€鐨凾oast妗嗭紝鎻愮ず鈥淟oading...鈥濇枃瀛椼€傚搷搴旀嫤鎴櫒锛歴etLoading锛屼綔鐢ㄦ槸璇锋眰鍝嶅簲鍚庡叧闂〉闈腑鐨凾oast妗嗐€備负浜嗙粺涓€寮€鍙戣鑼冿紝鎴戜滑绾﹀畾鎻掍欢寮€鍙戣鑼冨涓嬶細;//鎷︽埅鍣ㄤ笟鍔¤繑鍥為€夐」;};exportdefaultinterceptorName;棣栧厛鍒涘缓鏂囦欢src/request/interceptors/request/锛屽湪鐩綍涓嬪垱寤簊etLoading.js鏂囦欢銆傛牴鎹笂闈㈢害瀹氱殑鎻掍欢寮€鍙戣鑼冿紝鎴戜滑瀹屾垚濡備笅鎻掍欢寮€鍙戯細//src/request/interceptors/request/setLoading.jsimport{Toast}from'vant';import{log}from"../../log";/*鎷︽埅鍣ㄥ悕绉帮細鍏ㄥ眬璁剧疆璇锋眰鐨勫姞杞藉姩鐢?/constsetLoading=options=>{log("[interceptor.request]setLoading:",options);Toast.loading({duration:0,message:'Loading...',forbidClick:true,});杩斿洖閫夐」锛泒锛涘鍑洪粯璁よ缃姞杞斤紱鐒跺悗export灏嗚姹傛嫤鎴櫒瀵煎嚭涓烘暟缁勶紝鏂逛究鎷︽埅鍣ㄨ皟搴﹀櫒缁熶竴娉ㄥ唽锛?/src/request/interceptors/request/index.jsimportsetLoadingfrom'./setLoading';瀵煎嚭榛樿鍊糩setLoading]锛涘悓鏍风殑锛屾垜浠紑鍙戜竴涓搷搴旀嫤鎴櫒锛?/src/request/interceptors/response/setLoading.jsimport{Toast}from'vant';浠庘€?./../log鈥濆鍏log}锛?*鎷︽埅鍣ㄥ悕绉?off鍏ㄥ眬璇锋眰鍔犺浇鍔ㄧ敾*/constsetLoading=result=>{log("[interceptor.response]setLoading:",result);//绀轰緥锛氬綋璇锋眰鎴愬姛杩斿洖鏃讹紝鍏抽棴鎵€鏈塼oast妗唅f(result&&result.success){Toast.clear();}returnresult;};exportdefaultsetLoading;瀵煎嚭鍝嶅簲鎷︽埅鍣細//src/request/interceptors/response/index.jsimportsetLoadingfrom'./setLoading';exportdefault[setLoading];4銆佸叏灞€璁剧疆axios鎷︽埅鍣ㄥ拰涔嬪墠涓€鏍凤紝鎴戝張鍐欎簡鍑犱釜鎷︽埅鍣細璇锋眰鎷︽埅鍣細setSecurityInformation.js锛氬湪璇锋眰鐨剈rl涓坊鍔犲畨鍏ㄥ弬鏁帮紱setSignature.js锛氬湪璇锋眰澶翠腑娣诲姞绛惧悕淇℃伅锛泂etToken.js锛氬湪璇锋眰鐨刄RL涓坊鍔犵鍚嶄俊鎭紝鍦ㄨ姹傚ご涓坊鍔爐oken淇℃伅锛涘搷搴旀嫤鎴櫒锛歴etError.js锛氬鐞嗗搷搴旂粨鏋滅殑閿欒锛屾瘮濡傚叧闂墍鏈塼oast妗嗭紱setInvalid.js锛氬鐞嗗搷搴旂粨鏋滅殑鐧诲綍澶辫触锛屾瘮濡傝烦杞埌鐧诲綍椤甸潰锛泂etResult.js锛氬鐞嗗搷搴旂粨鏋滄暟鎹祵濂楄繃娣辩殑闂锛屽皢result.data.data.data绛夎繑鍥炵粨鏋滃鐞嗘垚result.data鏍煎紡锛涜嚦浜庡浣曞疄鐜帮紝鏈夊叴瓒ｇ殑鍙互鍘绘垜鐨凣ithub鐪嬬湅鐒跺悗鎴戜滑鍙互閲嶆柊鎵撳寘axios锛屽鍑簉equest瀵硅薄渚涗笟鍔′娇鐢細//src/request/index.jsimportaxiosfrom'axios';import{runInterceptors}from'./interceptors/index';exportconstrequestConfig={timeout:10000};letrequest=axios.create(requestConfig);request=runInterceptors(request);瀵煎嚭榛樿璇锋眰锛涘湪杩欓噷瀹屾垚銆備笟鍔′腑闇€瑕佸彂璧疯姹傦紝鍙互杩欐牱浣跨敤锛?template>
