Posted 濂囪垶绮鹃€?/a> 璇绘噦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了相关的知识,希望对你有一定的参考价值。

杩戞湡闃垮疂鍝ュ湪鍥㈤槦鍐呮悶浜嗕竴涓?銆屽浣曡婧愮爜銆?/strong> 鐨勪笓棰橈紝涓昏鐩殑鏄鍥㈤槦鐨勫皬浼欎即浠簡瑙h婧愮爜鐨勬€濊矾涓庢妧宸с€傚湪姝ゆ湡闂达紝闃垮疂鍝ヤ篃鍐欎簡 銆?鍜?nbsp; 涓夌瘒婧愮爜瑙f瀽鐨勬枃绔犮€?/p>

鍏朵腑鍓嶄袱绡囧湪銆屾帢閲戠ぞ鍖恒€?/strong>鑾峰緱涓嶉敊鐨勮瘎浠凤紝骞冲潎 630 澶氫釜馃憤锛屾墍浠ラ樋瀹濆摜灏辨兂鍐欎竴绡囨枃绔犳潵鍒嗕韩涓€涓嬫湰浜鸿婧愮爜鐨勬€濊矾銆佹妧宸т笌宸ュ叿銆?/p>

濂界殑锛岃鎴戜滑寮€濮嬪嚭鍙戝惂锛佸湪杩涘叆姝i涔嬪墠锛屾垜浠厛鏉ヤ釜璇绘簮鐮佸墠鐨?銆岀伒榄傚洓杩為棶銆?/strong> 鐑儹韬€?/p>

涓€銆佺伒榄傚洓杩為棶

1.1 涓轰粈涔堣璇绘簮浠g爜

1.2 濡備綍閫夋嫨椤圭洰

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <h4 data-tool=1.3 濡備綍闃呰婧愮爜
璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <h4 data-tool=1.4 鏈夊疄闄呯殑妗堜緥涔?/span>
璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <p data-tool=鏃㈢劧鍓嶄袱绡囨枃绔犳瘮杈冨彈澶у鍠滄锛屾帴涓嬫潵闃垮疂鍝ュ氨浠ユ渶鍙楁杩庣殑 Axios 涓轰緥锛屾潵鍒嗕韩涓€涓嬭婧愮爜鐨勬€濊矾涓庢妧宸с€?/p>

浜屻€佸浣曞搧璇?Axios锛?/span>

2.1 璧拌繘 Axios

Axios 鏄竴涓熀浜?Promise 鐨?HTTP 瀹㈡埛绔紝鍚屾椂鏀寔娴忚鍣ㄥ拰 Node.js 鐜銆傚畠鏄竴涓紭绉€鐨?HTTP 瀹㈡埛绔紝琚箍娉涘湴搴旂敤鍦ㄥぇ閲忕殑 Web 椤圭洰涓€?/p>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <p data-tool=鐢变笂鍥惧彲鐭ワ紝Axios 椤圭洰鐨?Star 鏁颁负 銆?8.1K銆?/strong>锛孎ork 鏁颁篃楂樿揪 銆?.3K銆?/strong>锛屾槸涓€涓緢浼樼鐨勫紑婧愰」鐩紝鎵€浠ュ€煎緱澶у缁嗙粏鍝佽銆?/p>

2.2 鍙戠幇 Axios 鐨勭編

鍦ㄧ‘璁?Axios 涓?鈥滆拷姹傜洰鏍団€?涔嬪悗锛屼笅涓€姝ユ垜浠氨闇€瑕佹潵鍙戠幇瀹冭韩涓婄殑浼樼偣锛堢壒鎬э級锛?/p>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <p data-tool=姣忎釜浜哄 鈥滅編鈥?閮芥湁涓嶅悓鐨勭湅娉曪紝瀵逛簬闃垮疂鍝ユ潵璇达紝鎴戠湅涓簡鍥句腑宸查€変腑鐨勪笁鐐广€傚洜姝わ紝瀹冧滑涔熷緢鍏夎崳鍦版垚涓鸿婧愮爜鐨勪笁涓垏鍏ョ偣銆傚綋鐒跺垏鍏ョ偣涔熶笉鏄秺澶氳秺濂斤紝鍙互鍏堟壘鑷繁鏈€鎰熷叴瓒g殑鍦版柟浣滀负鍒囧叆鐐广€傞渶瑕佹敞鎰忕殑鏄紝濡傛灉鍒囧叆鐐逛箣闂存湁鍏宠仈鍏崇郴鐨勮瘽锛屽缓璁仛涓畝鍗曠殑鎺掑簭銆?/p>

2.3 鎰熷彈 Axios 鐨勭編

閫夋嫨鍒囧叆鐐逛箣鍚庯紝鎴戜滑灏卞彲浠ュ紑濮嬮€愪竴鎰熷彈 Axios 鐨勮璁′箣缇庛€備互 銆岃兘澶熸嫤鎴姹備笌鍝嶅簲銆?/strong> 杩欎釜鍒囧叆鐐逛负渚嬶紝棣栧厛鎴戜滑灏变細鎺ヨЕ鍒?銆屾嫤鎴櫒銆?/strong> 鐨勬蹇点€傛墍浠ユ垜浠渶瑕佸厛浜嗚В鎷︽埅鍣ㄦ槸浠€涔堛€佹嫤鎴櫒鏈変粈涔堜綔鐢ㄤ互鍙婂浣曚娇鐢ㄦ嫤鎴櫒锛岃繖閲屾垜浠彲浠ヤ粠椤圭洰鐨?銆屽畼鏂规枃妗c€?/strong> 鎴栬€呴」鐩腑鐨?銆孯EADME.md銆?/strong> 鏂囨。鍏ユ墜銆?/p>

2.3.1 鎷︽埅鍣ㄧ殑浣滅敤

Axios 鎻愪緵浜嗚姹傛嫤鎴櫒鍜屽搷搴旀嫤鎴櫒鏉ュ垎鍒鐞嗚姹傚拰鍝嶅簲锛屽畠浠殑浣滅敤濡備笅锛?/p>

  • 璇锋眰鎷︽埅鍣細璇ョ被鎷︽埅鍣ㄧ殑浣滅敤鏄湪璇锋眰鍙戦€佸墠缁熶竴鎵ц鏌愪簺鎿嶄綔锛屾瘮濡傚湪璇锋眰澶翠腑娣诲姞 token 瀛楁銆?
  • 鍝嶅簲鎷︽埅鍣細璇ョ被鎷︽埅鍣ㄧ殑浣滅敤鏄湪鎺ユ敹鍒版湇鍔″櫒鍝嶅簲鍚庣粺涓€鎵ц鏌愪簺鎿嶄綔锛屾瘮濡傚彂鐜板搷搴旂姸鎬佺爜涓?401 鏃讹紝鑷姩璺宠浆鍒扮櫥褰曢〉銆?
2.3.2 鎷︽埅鍣ㄧ殑浣跨敤
// 娣诲姞璇锋眰鎷︽埅鍣?nbsp;鈥斺€?nbsp;澶勭悊璇锋眰閰嶇疆瀵硅薄
axios.interceptors.request.use(function (config{
  config.headers.token = 'added by interceptor';
  return config;
});

// 娣诲姞鍝嶅簲鎷︽埅鍣?nbsp;鈥斺€?nbsp;澶勭悊鍝嶅簲瀵硅薄
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)
});

鍦ㄤ簡瑙e畬鎷︽埅鍣ㄧ殑浣滅敤鍜岀敤娉曚箣鍚庯紝鎴戜滑灏变細鎶婄劍鐐硅仛鐒﹀埌 銆宎xios銆?/strong> 瀵硅薄锛屽洜涓烘敞鍐屾嫤鎴櫒鍜屽彂閫佽姹傞兘涓庡畠鏈夌揣瀵嗙殑鑱旂郴銆備笉杩囧湪鐪嬪叿浣撴簮鐮佷箣鍓嶏紝闃垮疂鍝ュ缓璁厛瀵瑰姛鑳界偣鍋氫竴涓嬫⒊鐞嗐€備互涓嬫槸闃垮疂鍝ョ殑鍒嗘瀽鎬濊矾锛?/p>

Axios 鐨勪綔鐢ㄦ槸鐢ㄤ簬鍙戦€?HTTP 璇锋眰锛岃姹傛嫤鎴櫒鍜屽搷搴旀嫤鎴櫒鍒嗗埆瀵瑰簲浜?HTTP 璇锋眰鐨勪笉鍚岄樁娈碉紝瀹冧滑鐨勬湰璐ㄦ槸涓€涓疄鐜扮壒瀹氬姛鑳界殑鍑芥暟銆傝繖鏃舵垜浠氨鍙互鎸夌収鍔熻兘鎶婂彂閫?HTTP 璇锋眰鎷嗚В鎴愪笉鍚岀被鍨嬬殑瀛愪换鍔★紝姣斿鏈?銆岀敤浜庡鐞嗚姹傞厤缃璞$殑瀛愪换鍔°€?/strong>锛?span class="mq-111">銆岀敤浜庡彂閫?HTTP 璇锋眰鐨勫瓙浠诲姟銆?/strong> 鍜?銆岀敤浜庡鐞嗗搷搴斿璞$殑瀛愪换鍔°€?/strong>銆傚綋鎴戜滑鎸夌収鎸囧畾鐨勯『搴忔潵鎵ц杩欎簺瀛愪换鍔℃椂锛屽氨鍙互瀹屾垚涓€娆″畬鏁寸殑 HTTP 璇锋眰銆?/p>

鏃㈢劧宸茬粡鎻愬埌浜嗕换鍔★紝鎴戜滑灏变細鑱旀兂鍒颁换鍔$鐞嗙郴缁熺殑鍩烘湰鍔熻兘锛氫换鍔℃敞鍐屻€佷换鍔$紪鎺掞紙浼樺厛绾ф帓搴忥級鍜屼换鍔¤皟搴︾瓑銆傚洜姝ゆ垜浠氨鍙互鑰冭檻浠?銆屼换鍔℃敞鍐屻€佷换鍔$紪鎺掑拰浠诲姟璋冨害銆?/strong> 涓変釜鏂归潰鏉ュ垎鏋?Axios 鎷︽埅鍣ㄧ殑瀹炵幇銆?/p>

2.3.3 浠诲姟娉ㄥ唽
// 娣诲姞璇锋眰鎷︽埅鍣?nbsp;鈥斺€?nbsp;澶勭悊璇锋眰閰嶇疆瀵硅薄
axios.interceptors.request.use(function (config{
  config.headers.token = 'added by interceptor';
  return config;
});

// 娣诲姞鍝嶅簲鎷︽埅鍣?nbsp;鈥斺€?nbsp;澶勭悊鍝嶅簲瀵硅薄
axios.interceptors.response.use(function (data{
  data.data = data.data + ' - modified by interceptor';
  return data;
});

鍦?lib/axios.js 璺緞涓嬶紝鎴戜滑鍙互鎵惧埌 銆宎xios銆?/strong> 瀵硅薄鐨勫畾涔夈€備负浜嗚兘鐩磋鍦颁簡瑙e璞′箣闂寸殑鍏崇郴锛岄樋瀹濆摜寤鸿澶у鍦ㄨ婧愮爜鐨勮繃绋嬩腑锛屽鍔ㄦ墜鐢荤敾鍥俱€傛瘮濡傞樋瀹濆摜浣跨敤涓嬪浘鏉ユ€荤粨涓€涓?Axios 瀵硅薄涓?InterceptorManager 瀵硅薄鐨勫唴閮ㄧ粨鏋勪笌鍏崇郴锛?/p>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <h5 data-tool=2.3.4 浠诲姟缂栨帓

鐜板湪鎴戜滑宸茬粡鐭ラ亾濡備綍娉ㄥ唽鎷︽埅鍣ㄤ换鍔★紝浣嗕粎浠呮敞鍐屼换鍔℃槸涓嶅锛屾垜浠繕闇€瑕佸宸叉敞鍐岀殑浠诲姟杩涜缂栨帓锛岃繖鏍锋墠鑳界‘淇濅换鍔$殑鎵ц椤哄簭銆?/p>

鍚屾牱瀵逛簬浠诲姟缂栨帓锛屼篃鍙互浣跨敤鍥剧殑褰㈠紡鏉ュ睍鐜颁换鍔$紪鎺掑悗鐨勭粨鏋溿€?span class="mq-144">銆岃繖閲屾湁涓€涓皬鎶€宸э紝灏辨槸鍙互閲囩敤瀵规瘮鐨勫舰寮忔潵灞曠ず浠诲姟缂栨帓鍚庣殑缁撴灉锛岃繖鏍峰瓙浼氭洿鍔犳竻妤氫换鍔$紪鎺掔殑澶勭悊閫昏緫銆傘€?/strong>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <h5 data-tool=2.3.5 浠诲姟璋冨害

浠诲姟缂栨帓瀹屾垚鍚庯紝瑕佸彂璧?HTTP 璇锋眰锛屾垜浠繕闇€瑕佹寜缂栨帓鍚庣殑椤哄簭鎵ц浠诲姟璋冨害銆?/p>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <blockquote data-tool= 鉂?/span>

闇€瑕佹敞鎰忕殑鏄細鍦ㄩ槄璇绘簮鐮佽繃绋嬩腑锛屼笉瑕佸お鍦ㄦ剰缁嗚妭銆傛瘮濡傚湪鐮旂┒ Axios 鎷︽埅鍣ㄥ師鐞嗘椂锛屼笉闇€瑕佸啀娣卞叆浜嗚В 銆宒ispatchRequest銆?/strong> 鑳屽悗鐨勫叿浣撳疄鐜帮紝鍙渶鐭ラ亾璇ユ柟娉曠敤浜庡疄鐜板彂閫?HTTP 璇锋眰鍗冲彲锛岃繖鏍锋墠涓嶄細鎶婃暣涓嚎璺媺寰楀お闀裤€?/p> 鉂?/span>

鍦ㄥ垎鏋愬畬鐗瑰畾鐨勫姛鑳界偣涔嬪悗锛屼篃璁镐綘宸茬粡璇绘噦鐨勫叿浣撶殑婧愪唬鐮併€備絾闃垮疂鍝ヨ寰楄繖骞朵笉鏄渶閲嶈鐨勶紝銆屾洿閲嶈鐨勬槸鎬濊€冨畠鐨勮璁℃€濇兂锛岃繖鏍疯璁℃湁浠€涔堝ソ澶勶紝瀵逛簬鎴戜滑鏈夋病鏈変粈涔堝€煎緱鍊熼壌鍜屽涔犵殑鍦版柟銆?/strong>銆傛瘮濡傚弬鑰?Axios 鎷︽埅鍣ㄧ殑璁捐妯″瀷锛屾垜浠氨鍙互鎶藉嚭浠ヤ笅閫氱敤鐨勪换鍔″鐞嗘ā鍨嬶細

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <p data-tool=涓婇潰闃垮疂鍝ヤ互 Axios 鐨勬嫤鎴櫒涓轰緥锛屽垎浜簡璇?Axios 婧愮爜鐨勬€濊矾涓庢妧宸с€傛帴涓嬫潵闃垮疂鍝ユ潵鍒嗕韩涓€浜涜婧愮爜鐨勫缓璁拰杈呭姪宸ュ叿銆?/p>

涓夈€佽婧愮爜鐨勫缓璁?/span>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <h3 data-tool=鍥涖€佽婧愮爜杈呭姪宸ュ叿
璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <p data-tool=锛堝浘鐗囨潵婧愶細https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd锛?/p>

浜斻€佹€荤粨

鍏跺疄闄や簡涓婇潰鐨勫唴瀹逛箣澶栵紝璇讳紭绉€寮€婧愰」鐩繕鏈夋尯澶氬€煎緱鍏虫敞鐨勫湴鏂广€傞樋瀹濆摜鍦ㄥ涔?BetterScroll 椤圭洰婧愮爜鏃讹紝鎬荤粨浜嗕竴寮犳€濈淮瀵煎浘锛?/p>

璇绘噦寮€婧愰」鐩殑鎬濊矾鍜屾妧宸?> 
 </figure> 
 <p data-tool=锛堝浘鐗囨潵婧愶細https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd锛?/p>

涓嬮潰闃垮疂鍝ョ敤涓€寮犲浘鏉ユ€荤粨涓€涓?axios 鍜?better-scroll 杩欎袱涓紑婧愰」鐩殑瀛︿範璺嚎锛?/p>

鉂?/span>

1銆丄xios 椤圭洰鐨勫垏鍏ョ偣鏄粠 Github 涓殑鍔熻兘鐗规€т腑绛涢€夊嚭鏉ョ殑锛?/p>

2銆丅etterScroll 鐨勫垏鍏ョ偣鏄粠鎺橀噾涓?鈥淏etterScroll 2.0 鍙戝竷锛氱簿鐩婃眰绮撅紝涓庝綘鍚岃鈥?杩欑瘒鏂囩珷涓粙缁嶇殑鍔熻兘浜偣涓壘鍒扮殑銆?/p> 鉂?/span>

闄ゆ涔嬪锛岄樋瀹濆摜涔熸潵绠€鍗曟€荤粨涓€涓嬫湰鏂囦粙缁嶇殑璇绘簮鐮佺殑鎬濊矾涓庢妧宸э細

  • 绔欏湪宸ㄤ汉鐨勮偐鑶€锛屾彁鍓嶉槄璇讳竴浜涢」鐩浉鍏崇殑浼樿川鏂囩珷锛?
  • 姹囨€诲涔犳垨宸ヤ綔涓亣鍒扮殑闂锛屽甫鐫€闂杩涜婧愮爜瀛︿範锛?
  • 鏄庣‘闃呰婧愮爜鐨勪富绾挎垨鍒囧叆鐐癸紱
  • 灏藉彲鑳戒粠绠€鍗曠殑绀轰緥鍑哄彂鏉ュ垎鏋愭瘡涓姛鑳界偣锛?
  • 鍏堟⒊鐞嗘竻妤氫富瑕佹祦绋嬶紝涓嶈澶湪鎰忕粏鑺傦紝閬垮厤鎶婃暣涓嚎璺媺寰楀お闀匡紱
  • 鍦ㄩ槄璇绘簮鐮佽繃绋嬩腑锛岃澶氬鐢诲浘锛岃繖鏍风悊瑙h捣鏉ヤ細鏇村姞鐩磋銆?

鏈枃闃垮疂鍝ュ垎浜簡涓汉璇绘簮鐮佺殑鎬濊矾銆佹妧宸т笌宸ュ叿锛屽笇鏈涢槄璇诲畬鏈枃鑳藉浣犳湁鎵€鍚彂鎴栧府鍔┿€傚鏋滀綘鏈夎婧愮爜鏇村ソ鐨勬€濊矾涓庢妧宸э紝娆㈣繋闅忔椂璺熼樋瀹濆摜浜ゆ祦銆傛湁鍐欏緱涓嶅ソ鐨勫湴鏂癸紝涔熻鍚勪綅瑙佽皡鍝堛€?/p>

鍏充簬濂囪垶鍛ㄥ垔

以上是关于的主要内容,如果未能解决你的问题,请参考以下文章

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

片段和活动之间的核心区别是啥?哪些代码可以写成片段?

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段6——CSS选择器

VSCode自定义代码片段——声明函数

VSCode自定义代码片段8——声明函数