涓簡婧愮爜鐨勬瘨锛岀粰浣犱竴鍓壇鑽?/a>
Posted 闃垮疂鍝?,
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了涓簡婧愮爜鐨勬瘨锛岀粰浣犱竴鍓壇鑽?/a>相关的知识，希望对你有一定的参考价值。
杩戞湡闃垮疂鍝ュ湪鍥㈤槦鍐呮悶浜嗕竴涓?濡備綍璇绘簮鐮?/strong> 鐨勪笓棰橈紝涓昏鐩殑鏄鍥㈤槦鐨勫皬浼欎即浠簡瑙ｈ婧愮爜鐨勬€濊矾涓庢妧宸с€傚湪姝ゆ湡闂达紝闃垮疂鍝ヤ篃鍐欎簡 77.9K 鐨?Axios 椤圭洰鏈夊摢浜涘€煎緱鍊熼壌鐨勫湴鏂?/a>銆?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FN4iw3bi0bxJ57J8EAp5ctQ" rel="nofollow">浠?12.9K 鐨勫墠绔紑婧愰」鐩垜瀛﹀埌浜嗗暐 鍜?濡備綍璁╀綘鐨?Express 椋炶捣鏉?/a> 涓夌瘒婧愮爜瑙ｆ瀽鐨勬枃绔犮€傚叾涓墠涓ょ瘒鍦?鎺橀噾绀惧尯 鑾峰緱涓嶉敊鐨勮瘎浠凤紝骞冲潎 705+ 涓?馃憤锛屾墍浠ラ樋瀹濆摜灏辨兂鍐欎竴绡囨枃绔犳潵鍒嗕韩涓€涓嬫湰浜鸿婧愮爜鐨勬€濊矾銆佹妧宸т笌宸ュ叿銆?/p>
濂界殑锛岃鎴戜滑寮€濮嬪嚭鍙戝惂锛佸湪杩涘叆姝ｉ涔嬪墠锛屾垜浠厛鏉ヤ釜璇绘簮鐮佸墠鐨?鐏甸瓊鍥涜繛闂?/strong> 鐑儹韬€?/p>
涓€銆佺伒榄傚洓杩為棶
1.1 涓轰粈涔堣璇绘簮浠ｇ爜
1.2 濡備綍閫夋嫨椤圭洰
1.3 濡備綍闃呰婧愮爜
1.4 鏈夊疄闄呯殑妗堜緥涔?/h4>
鏃㈢劧鍓嶄袱绡囨枃绔犳瘮杈冨彈澶у鍠滄锛屾帴涓嬫潵闃垮疂鍝ュ氨浠ユ渶鍙楁杩庣殑 Axios 涓轰緥锛屾潵鍒嗕韩涓€涓嬭婧愮爜鐨勬€濊矾涓庢妧宸с€?/p>
浜屻€佸浣曞搧璇?Axios锛?/h3>2.1 璧拌繘 Axios
Axios 鏄竴涓熀浜?Promise 鐨?HTTP 瀹㈡埛绔紝鍚屾椂鏀寔娴忚鍣ㄥ拰 Node.js 鐜銆傚畠鏄竴涓紭绉€鐨?HTTP 瀹㈡埛绔紝琚箍娉涘湴搴旂敤鍦ㄥぇ閲忕殑 Web 椤圭洰涓€?/p>
鐢变笂鍥惧彲鐭ワ紝Axios 椤圭洰鐨?Star 鏁颁负 78.1K锛孎ork 鏁颁篃楂樿揪 7.3K锛屾槸涓€涓緢浼樼鐨勫紑婧愰」鐩紝鎵€浠ュ€煎緱澶у缁嗙粏鍝佽銆?/p>
2.2 鍙戠幇 Axios 鐨勭編
鍦ㄧ‘璁?Axios 涓?鈥滆拷姹傜洰鏍団€?涔嬪悗锛屼笅涓€姝ユ垜浠氨闇€瑕佹潵鍙戠幇瀹冭韩涓婄殑浼樼偣锛堢壒鎬э級锛?/p>
姣忎釜浜哄 鈥滅編鈥?閮芥湁涓嶅悓鐨勭湅娉曪紝瀵逛簬闃垮疂鍝ユ潵璇达紝鎴戠湅涓簡鍥句腑宸查€変腑鐨勪笁鐐广€傚洜姝わ紝瀹冧滑涔熷緢鍏夎崳鍦版垚涓鸿婧愮爜鐨勪笁涓垏鍏ョ偣銆傚綋鐒跺垏鍏ョ偣涔熶笉鏄秺澶氳秺濂斤紝鍙互鍏堟壘鑷繁鏈€鎰熷叴瓒ｇ殑鍦版柟浣滀负鍒囧叆鐐广€傞渶瑕佹敞鎰忕殑鏄紝濡傛灉鍒囧叆鐐逛箣闂存湁鍏宠仈鍏崇郴鐨勮瘽锛屽缓璁仛涓畝鍗曠殑鎺掑簭銆?/p>
2.3 鎰熷彈 Axios 鐨勭編
閫夋嫨鍒囧叆鐐逛箣鍚庯紝鎴戜滑灏卞彲浠ュ紑濮嬮€愪竴鎰熷彈 Axios 鐨勮璁′箣缇庛€備互 鑳藉鎷︽埅璇锋眰涓庡搷搴?/strong> 杩欎釜鍒囧叆鐐逛负渚嬶紝棣栧厛鎴戜滑灏变細鎺ヨЕ鍒?鎷︽埅鍣?/strong> 鐨勬蹇点€傛墍浠ユ垜浠渶瑕佸厛浜嗚В鎷︽埅鍣ㄦ槸浠€涔堛€佹嫤鎴櫒鏈変粈涔堜綔鐢ㄤ互鍙婂浣曚娇鐢ㄦ嫤鎴櫒锛岃繖閲屾垜浠彲浠ヤ粠椤圭洰鐨?瀹樻柟鏂囨。 鎴栬€呴」鐩腑鐨?README.md 鏂囨。鍏ユ墜銆?/p>
2.3.1 鎷︽埅鍣ㄧ殑浣滅敤
Axios 鎻愪緵浜嗚姹傛嫤鎴櫒鍜屽搷搴旀嫤鎴櫒鏉ュ垎鍒鐞嗚姹傚拰鍝嶅簲锛屽畠浠殑浣滅敤濡備笅锛?/p>
- 璇锋眰鎷︽埅鍣細璇ョ被鎷︽埅鍣ㄧ殑浣滅敤鏄湪璇锋眰鍙戦€佸墠缁熶竴鎵ц鏌愪簺鎿嶄綔锛屾瘮濡傚湪璇锋眰澶翠腑娣诲姞 token 瀛楁銆?/li>
- 鍝嶅簲鎷︽埅鍣細璇ョ被鎷︽埅鍣ㄧ殑浣滅敤鏄湪鎺ユ敹鍒版湇鍔″櫒鍝嶅簲鍚庣粺涓€鎵ц鏌愪簺鎿嶄綔锛屾瘮濡傚彂鐜板搷搴旂姸鎬佺爜涓?401 鏃讹紝鑷姩璺宠浆鍒扮櫥褰曢〉銆?/li>
2.3.2 鎷︽埅鍣ㄧ殑浣跨敤
// 娣诲姞璇锋眰鎷︽埅鍣?鈥斺€?澶勭悊璇锋眰閰嶇疆瀵硅薄
axios.interceptors.request.use(function (config) {
config.headers.token = \'added by interceptor\';
return config;
});
// 娣诲姞鍝嶅簲鎷︽埅鍣?鈥斺€?澶勭悊鍝嶅簲瀵硅薄
axios.interceptors.response.use(function (data) {
data.data = data.data + \' - modified by interceptor\';
return data;
});
axios({
url: \'/hello\',
method: \'get\',
}).then(res =>{
console.log(\'axios res.data: \', res.data)
});鍦ㄤ簡瑙ｅ畬鎷︽埅鍣ㄧ殑浣滅敤鍜岀敤娉曚箣鍚庯紝鎴戜滑灏变細鎶婄劍鐐硅仛鐒﹀埌 axios 瀵硅薄锛屽洜涓烘敞鍐屾嫤鎴櫒鍜屽彂閫佽姹傞兘涓庡畠鏈夌揣瀵嗙殑鑱旂郴銆備笉杩囧湪鐪嬪叿浣撴簮鐮佷箣鍓嶏紝闃垮疂鍝ュ缓璁厛瀵瑰姛鑳界偣鍋氫竴涓嬫⒊鐞嗐€備互涓嬫槸闃垮疂鍝ョ殑鍒嗘瀽鎬濊矾锛?/p>
Axios 鐨勪綔鐢ㄦ槸鐢ㄤ簬鍙戦€?HTTP 璇锋眰锛岃姹傛嫤鎴櫒鍜屽搷搴旀嫤鎴櫒鍒嗗埆瀵瑰簲浜?HTTP 璇锋眰鐨勪笉鍚岄樁娈碉紝瀹冧滑鐨勬湰璐ㄦ槸涓€涓疄鐜扮壒瀹氬姛鑳界殑鍑芥暟銆傝繖鏃舵垜浠氨鍙互鎸夌収鍔熻兘鎶婂彂閫?HTTP 璇锋眰鎷嗚В鎴愪笉鍚岀被鍨嬬殑瀛愪换鍔★紝姣斿鏈?鐢ㄤ簬澶勭悊璇锋眰閰嶇疆瀵硅薄鐨勫瓙浠诲姟锛?strong>鐢ㄤ簬鍙戦€?HTTP 璇锋眰鐨勫瓙浠诲姟 鍜?鐢ㄤ簬澶勭悊鍝嶅簲瀵硅薄鐨勫瓙浠诲姟銆傚綋鎴戜滑鎸夌収鎸囧畾鐨勯『搴忔潵鎵ц杩欎簺瀛愪换鍔℃椂锛屽氨鍙互瀹屾垚涓€娆″畬鏁寸殑 HTTP 璇锋眰銆?/p>
鏃㈢劧宸茬粡鎻愬埌浜嗕换鍔★紝鎴戜滑灏变細鑱旀兂鍒颁换鍔＄鐞嗙郴缁熺殑鍩烘湰鍔熻兘锛氫换鍔℃敞鍐屻€佷换鍔＄紪鎺掞紙浼樺厛绾ф帓搴忥級鍜屼换鍔¤皟搴︾瓑銆傚洜姝ゆ垜浠氨鍙互鑰冭檻浠?浠诲姟娉ㄥ唽銆佷换鍔＄紪鎺掑拰浠诲姟璋冨害 涓変釜鏂归潰鏉ュ垎鏋?Axios 鎷︽埅鍣ㄧ殑瀹炵幇銆?/p>
2.3.3 浠诲姟娉ㄥ唽
// 娣诲姞璇锋眰鎷︽埅鍣?鈥斺€?澶勭悊璇锋眰閰嶇疆瀵硅薄
axios.interceptors.request.use(function (config) {
config.headers.token = \'added by interceptor\';
return config;
});
// 娣诲姞鍝嶅簲鎷︽埅鍣?鈥斺€?澶勭悊鍝嶅簲瀵硅薄
axios.interceptors.response.use(function (data) {
data.data = data.data + \' - modified by interceptor\';
return data;
});鍦?lib/axios.js 璺緞涓嬶紝鎴戜滑鍙互鎵惧埌 axios 瀵硅薄鐨勫畾涔夈€備负浜嗚兘鐩磋鍦颁簡瑙ｅ璞′箣闂寸殑鍏崇郴锛岄樋瀹濆摜寤鸿澶у鍦ㄨ婧愮爜鐨勮繃绋嬩腑锛屽鍔ㄦ墜鐢荤敾鍥俱€傛瘮濡傞樋瀹濆摜浣跨敤涓嬪浘鏉ユ€荤粨涓€涓?Axios 瀵硅薄涓?InterceptorManager 瀵硅薄鐨勫唴閮ㄧ粨鏋勪笌鍏崇郴锛?/p>
2.3.4 浠诲姟缂栨帓
鐜板湪鎴戜滑宸茬粡鐭ラ亾濡備綍娉ㄥ唽鎷︽埅鍣ㄤ换鍔★紝浣嗕粎浠呮敞鍐屼换鍔℃槸涓嶅锛屾垜浠繕闇€瑕佸宸叉敞鍐岀殑浠诲姟杩涜缂栨帓锛岃繖鏍锋墠鑳界‘淇濅换鍔＄殑鎵ц椤哄簭銆?/p>
鍚屾牱瀵逛簬浠诲姟缂栨帓锛屼篃鍙互浣跨敤鍥剧殑褰㈠紡鏉ュ睍鐜颁换鍔＄紪鎺掑悗鐨勭粨鏋溿€?杩欓噷鏈変竴涓皬鎶€宸э紝灏辨槸鍙互閲囩敤瀵规瘮鐨勫舰寮忔潵灞曠ず浠诲姟缂栨帓鍚庣殑缁撴灉锛岃繖鏍峰瓙浼氭洿鍔犳竻妤氫换鍔＄紪鎺掔殑澶勭悊閫昏緫銆?/strong>
2.3.5 浠诲姟璋冨害
浠诲姟缂栨帓瀹屾垚鍚庯紝瑕佸彂璧?HTTP 璇锋眰锛屾垜浠繕闇€瑕佹寜缂栨帓鍚庣殑椤哄簭鎵ц浠诲姟璋冨害銆?/p>
闇€瑕佹敞鎰忕殑鏄細鍦ㄩ槄璇绘簮鐮佽繃绋嬩腑锛屼笉瑕佸お鍦ㄦ剰缁嗚妭銆傛瘮濡傚湪鐮旂┒ Axios 鎷︽埅鍣ㄥ師鐞嗘椂锛屼笉闇€瑕佸啀娣卞叆浜嗚В dispatchRequest 鑳屽悗鐨勫叿浣撳疄鐜帮紝鍙渶鐭ラ亾璇ユ柟娉曠敤浜庡疄鐜板彂閫?HTTP 璇锋眰鍗冲彲锛岃繖鏍锋墠涓嶄細鎶婃暣涓嚎璺媺寰楀お闀裤€?/blockquote>鍦ㄥ垎鏋愬畬鐗瑰畾鐨勫姛鑳界偣涔嬪悗锛屼篃璁镐綘宸茬粡璇绘噦鐨勫叿浣撶殑婧愪唬鐮併€備絾闃垮疂鍝ヨ寰楄繖骞朵笉鏄渶閲嶈鐨勶紝鏇撮噸瑕佺殑鏄€濊€冨畠鐨勮璁℃€濇兂锛岃繖鏍疯璁℃湁浠€涔堝ソ澶勶紝瀵逛簬鎴戜滑鏈夋病鏈変粈涔堝€煎緱鍊熼壌鍜屽涔犵殑鍦版柟銆傛瘮濡傚弬鑰?Axios 鎷︽埅鍣ㄧ殑璁捐妯″瀷锛屾垜浠氨鍙互鎶藉嚭浠ヤ笅閫氱敤鐨勪换鍔″鐞嗘ā鍨嬶細
涓婇潰闃垮疂鍝ヤ互 Axios 鐨勬嫤鎴櫒涓轰緥锛屽垎浜簡璇?Axios 婧愮爜鐨勬€濊矾涓庢妧宸с€傛帴涓嬫潵闃垮疂鍝ユ潵鍒嗕韩涓€浜涜婧愮爜鐨勫缓璁拰杈呭姪宸ュ叿銆?/p>
涓夈€佽婧愮爜鐨勫缓璁?/h3>
鍥涖€佽婧愮爜杈呭姪宸ュ叿
濡傛灉浣犲涓嬪垪杈呭姪宸ュ叿鎰熷叴瓒ｇ殑璇濓紝鍙互閫氳繃浠ヤ笅鍥剧墖鏉ユ簮鐨勯摼鎺ワ紝鏉ョ洿鎺ユ墦寮€姣忎釜宸ュ叿鐨勫湪绾垮湴鍧€銆?/p>
锛堝浘鐗囨潵婧愶細https://www.processon.com/vie...锛?/p>
浜斻€佹€荤粨
鍏跺疄闄や簡涓婇潰鐨勫唴瀹逛箣澶栵紝璇讳紭绉€寮€婧愰」鐩繕鏈夋尯澶氬€煎緱鍏虫敞鐨勫湴鏂广€傞樋瀹濆摜鍦ㄥ涔?BetterScroll 椤圭洰婧愮爜鏃讹紝鎬荤粨浜嗕竴寮?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fwww.processon.com%2Fview%2Flink%2F5f6d2beff346fb166d0ac4fd" rel="nofollow">鎬濈淮瀵煎浘锛?/p>
锛堝浘鐗囨潵婧愶細https://www.processon.com/vie...锛?/p>
涓嬮潰闃垮疂鍝ョ敤涓€寮犲浘鏉ユ€荤粨涓€涓?axios 鍜?better-scroll 杩欎袱涓紑婧愰」鐩殑瀛︿範璺嚎锛?/p>
1銆丄xios 椤圭洰鐨勫垏鍏ョ偣鏄粠 Github 涓殑鍔熻兘鐗规€т腑绛涢€夊嚭鏉ョ殑锛?p>2銆丅etterScroll 鐨勫垏鍏ョ偣鏄粠鎺橀噾涓?BetterScroll 2.0 鍙戝竷锛氱簿鐩婃眰绮撅紝涓庝綘鍚岃 杩欑瘒鏂囩珷涓粙缁嶇殑鍔熻兘浜偣涓壘鍒扮殑銆?/p>闄ゆ涔嬪锛岄樋瀹濆摜涔熸潵绠€鍗曟€荤粨涓€涓嬫湰鏂囦粙缁嶇殑璇绘簮鐮佺殑鎬濊矾涓庢妧宸э細
- 绔欏湪宸ㄤ汉鐨勮偐鑶€锛屾彁鍓嶉槄璇讳竴浜涢」鐩浉鍏崇殑浼樿川鏂囩珷锛?/li>
- 姹囨€诲涔犳垨宸ヤ綔涓亣鍒扮殑闂锛屽甫鐫€闂杩涜婧愮爜瀛︿範锛?/li>
- 鏄庣‘闃呰婧愮爜鐨勪富绾挎垨鍒囧叆鐐癸紱
- 灏藉彲鑳戒粠绠€鍗曠殑绀轰緥鍑哄彂鏉ュ垎鏋愭瘡涓姛鑳界偣锛?/li>
- 鍏堟⒊鐞嗘竻妤氫富瑕佹祦绋嬶紝涓嶈澶湪鎰忕粏鑺傦紝閬垮厤鎶婃暣涓嚎璺媺寰楀お闀匡紱
- 鍦ㄩ槄璇绘簮鐮佽繃绋嬩腑锛岃澶氬鐢诲浘锛岃繖鏍风悊瑙ｈ捣鏉ヤ細鏇村姞鐩磋銆?/li>
鏈枃闃垮疂鍝ュ垎浜簡涓汉璇绘簮鐮佺殑鎬濊矾銆佹妧宸т笌宸ュ叿锛屽笇鏈涢槄璇诲畬鏈枃鑳藉浣犳湁鎵€鍚彂鎴栧府鍔┿€傚鏋滀綘鏈夎婧愮爜鏇村ソ鐨勬€濊矾涓庢妧宸э紝娆㈣繋闅忔椂璺熼樋瀹濆摜浜ゆ祦鍝堛€傛湁鍐欏緱涓嶅ソ鐨勫湴鏂癸紝涔熻鍚勪綅瑙佽皡鍝堛€?/p>
鍏€佸弬鑰冭祫婧?/h3>
- 77.9K 鐨?Axios 椤圭洰鏈夊摢浜涘€煎緱鍊熼壌鐨勫湴鏂?/a>
- 浠?12.9K 鐨勫墠绔紑婧愰」鐩垜瀛﹀埌浜嗗暐锛?/a>
- 濡備綍璁╀綘鐨?Express 椋炶捣鏉?/a>
以上是关于涓簡婧愮爜鐨勬瘨锛岀粰浣犱竴鍓壇鑽?/a>的主要内容，如果未能解决你的问题，请参考以下文章
