銆婂啀涔熶笉瀛JAX浜嗐€嬫槸浠JAX涓轰富棰樼殑绯诲垪鏂囩珷銆傚笇鏈涜鑰呴€氳繃闃呰鏈郴鍒楁枃绔狅紝鑳藉瀵笰JAX鎶€鏈湁鏇存繁鍏ョ殑浜嗚В鍜岃璇嗐€傛偍涓嶅繀鍐嶄笓闂ㄥ涔燗JAX銆傛湰鏂囨槸璇ョ郴鍒楃殑绗笁绡囨枃绔狅紝鏈€鍚庢洿鏂颁簬2023骞?鏈堛€傛偍鍙兘浼氭劅鍒版儕璁讹紝鎴戝湪涓婁竴绡囨枃绔犱腑鍚戞偍浠嬬粛鐨刋MLHttpReuqest瀵硅薄鏄疢icrosoft鍦?999骞村紩鍏ョ殑锛屽苟涓旀槸IE5鐨勪竴閮ㄥ垎銆?014骞达紝杩樻槸寰蒋鎻愬嚭浜嗘垜浠粖澶╃啛鎮夌殑PromiseAPI锛屽苟杩呴€熻TC39鏀跺綍鍒癑avaScript鏍囧噯涓€傞殢鍚庯紝W3C鍏竷浜嗘洿鍔犵畝娲佷紭闆呯殑AJAX璇锋眰API锛岃繖灏辨槸鏈枃鐨勪富瑙掞細鈥淔etchAPI鈥濄€備竴銆佷粈涔堟槸FetchAPIFetchAPI鍜孹MLHttpRequest瀵硅薄涓€鏍凤紝鏄祻瑙堝櫒鎻愪緵鐨勭敤浜庤幏鍙栨垨鎿嶄綔缃戠粶璧勬簮鐨凧avaScriptAPI銆傚畠鍏佽寮€鍙戜汉鍛橀€氳繃JavaScript浠g爜鍙戦€佸拰鎺ユ敹HTTP璇锋眰鍜屽搷搴斻€侳etchAPI鐜板湪鎷ユ湁骞挎硾鐨勬祻瑙堝櫒鏀寔锛屽苟涓斿湪澶у鏁版儏鍐典笅鍙互鏇夸唬XMLHttpRequest瀵硅薄銆備笌XMLHttpRequest鍦∟ode.js涓渶瑕佷娇鐢ㄧ涓夋柟鍖呯殑鍛借繍涓嶅悓锛孨ode灏嗕簬2022骞?鏈?鏃ュ悎骞禙etchAPI鐨凱R銆傚湪Node.js17.5鍙婁互涓婄増鏈腑锛屽彲浠ョ洿鎺ヤ娇鐢‵etchAPI銆?.FetchAPI鍏ラ棬2.1FetchAPI缁撴瀯鍦ㄤ笂涓€绡囨枃绔犱腑锛屾垜浠缁嗕粙缁嶄簡濡備綍閫氳繃XHRHttpRequest瀵硅薄鍙戦€丄JAX璇锋眰銆傚湪鏈珷涓紝鎴戜滑灏嗘瘮杈僗HRHttpRequest鍜孎etchAPI鐨凙PI璁捐锛屼互浜嗚В涓轰粈涔團etchAPI鐨勮璁℃洿鍔犱紭闆呭拰鐜颁唬銆傞€氳繃涓嬪浘锛岀粨鍚堜笂涓€绡囨枃绔犺瑙g殑鍐呭锛屼綘搴旇寰堝鏄撶悊瑙HRHttpRequestAPI鐨勬暣浣撶粨鏋勩€傚湪Promise杩樻病鏈夎癁鐢熺殑鏃朵唬锛孹HRHttpRequest瀵硅薄涓昏閫氳繃浜嬩欢璁㈤槄/娲惧彂鏈哄埗瑙e喅璇锋眰/鍝嶅簲鐨勫紓姝ラ棶棰樸€傛鏃舵墍鏈夐渶瑕佺殑灞炴€у拰鎵╁睍灞炴€ч兘鎸傝浇鍦╔HRHttpRequest瀵硅薄涓婏紝鎻愪緵鐨勬柟娉曞拰灞炴€ч兘闈炲父搴曞眰銆傚緢澶氬姛鑳斤紝姣斿鐩戞帶鍝嶅簲鐘舵€侊紝闇€瑕佸紑鍙戣€呮墜鍔ㄥ疄鐜般€傝繖瀵艰嚧浜哸xios绛夌涓夋柟鍖呯殑鍑虹幇锛屽畠浠彁渚涜娉曠硸鏉ラ檷浣庣紪鐮佸鏉傛€с€備粠涓嬪浘鍙互鐪嬪嚭FetchAPI鐨勬暣浣撹璁℃洿鍔犵畝娲佹槗鎳傦細浠庡浘涓彲浠ョ湅鍑猴紝FetchAPI鎻愪緵浜嗙洿瑙傜殑娴佸紡澶勭悊鏂规硶.fetch()銆?then()鍜?鎶撲綇锛堬級銆傚苟灏咥JAX璇锋眰鎵€闇€鐨勬墍鏈変俊鎭悎鐞嗙殑鎵撳寘鎴愪笁涓被锛歊equest銆丠eaders鍜孯esponse銆傝繖绉嶆竻鏅扮殑浠g爜缁勭粐浣垮緱寮€鍙戣€呭緢瀹规槗鐞嗚В鍜屼娇鐢‵etchAPI鐨勭浉鍏崇壒鎬с€傛澶栵紝FetchAPI杩樹娇鐢≒romise鐗规€э紙.catch()鏂规硶锛夐€氳繃鎺ュ彛鏂规硶灏嗛敊璇鐞嗘樉绀烘毚闇茬粰鐢ㄦ埛锛岃繖浣垮緱寮€鍙戜汉鍛樺彲浠ョ紪鍐欐洿鍋ュ.鐨勪唬鐮併€傛€讳箣锛岄€氳繃缁撳悎鏈€鏂扮殑JS寮傛澶勭悊瑙e喅鏂规Promise锛孎etchAPI寰堝ソ鐨勭粍缁囦簡AJAX璇锋眰鏁版嵁鍜屾柟娉曚箣闂寸殑鍏崇郴锛岃JavaScript寮€鍙戣€呯殑鐢熸椿鏇磋交鏉撅紝骞惰揩浣縓HRHttpRequestAPI涓庝竴绯诲垪璇硶绯栦竴璧峰伐浣溿€備笁鏂瑰浘涔﹂閫愭笎閫€鍑轰簡鍘嗗彶鑸炲彴銆?.2FetchAPI鎻愪緵鐨勫睘鎬у拰鏂规硶鍦ㄤ簡瑙d簡FetchAPI鐨勬暣浣撹璁′箣鍚庯紝鎴戜滑鏉ュ揩閫熶簡瑙d竴涓婩etchAPI鎻愪緵鐨勬牳蹇冨睘鎬у拰鏂规硶銆傚緢鐩磋锛孎etchAPI鍏ㄥ眬鎻愪緵浜唂etch()鏂规硶锛屾帴鏀朵竴涓猂equest绫荤殑瀹炰緥锛屾垨鑰呬袱涓弬鏁帮細resource锛氳〃绀鸿祫婧愯幏鍙栧湴鍧€锛屽寘鎷瓧绗︿覆鍖栧悗浠讳綍鏈夋晥鐨刄RL鍦板潃锛屽繀濉紱options锛氬寘鍚櫎璧勬簮鍦板潃澶栫殑鎵€鏈夎嚜瀹氫箟HTTP璇锋眰鍙傛暟锛屽彲閫夛紝姣旇緝甯哥敤鐨勫睘鎬ф湁锛歮ethod锛欻TTP璇锋眰鏂瑰紡锛岄粯璁や负GET锛沨eaders锛氬湪姝ゅ娣诲姞璇锋眰澶翠俊鎭紱璇ュ€煎彲浠ユ槸涓€涓寘鍚湁鏁堝睘鎬х殑瀵硅薄锛屾垨鑰呮槸涓€涓狧eaders瀵硅薄鐨勫疄渚嬶紙娉ㄦ剰涓嶈兘娣诲姞杩欎簺澶村睘鎬э級锛沚ody锛氬彂閫佺粰鏈嶅姟鍣ㄧ殑浠绘剰鏁版嵁锛屾暟鎹被鍨嬩笉闄愶紱mode锛氳姹傜殑妯″紡锛屾秹鍙婂埌璺ㄥ煙锛屾垜浠湪鍚庨潰鐨勬枃绔犱腑浼氭彁鍒帮紱credentials锛氭寚瀹氭祻瑙堝櫒鏄惁搴旇鍦ㄨ姹備腑鍖呭惈鍑嵁锛岃繖涔熶笌璺ㄥ煙鏈夊叧銆侰redentials鍖呮嫭Cookie鍜孒TTP璁よ瘉锛屾湁3涓彲閫夊€硷細omit锛氫笉鍖呭惈浠讳綍鍑瘉锛泂ame-origin锛氫粎鍦ㄨ姹傚悓婧愬湴鍧€鏃跺寘鍚嚟璇侊紙榛樿鍊硷級锛涘寘鎷細搴斿缁堝湪璇锋眰涓寘鍚嚟鎹紱cache锛氭寚瀹氭湰娆¤姹備笌娴忚鍣ㄧ殑HTTP缂撳瓨鐨勫叧绯伙紱閲嶅畾鍚戯細鎸囧畾濡備綍澶勭悊鍖呭惈閲嶅畾鍚戠殑鍝嶅簲锛涘綋璋冪敤fetch()鏂规硶鏃讹紝瀹冧細绔嬪嵆杩斿洖涓€涓狿romise瀵硅薄锛岃瀵硅薄灏嗗湪鏀跺埌鍝嶅簲鏍囧ご鏃跺垏鎹负resolved骞惰繑鍥濺esponse瀵硅薄鐨勫疄渚嬨€傪煔ㄦ敞鎰忥紝涔熻鍜屼綘鎯崇殑涓嶄竴鏍凤紝fetch()鏂规硶杩斿洖鐨凱romise瀵硅薄鍙湁鍦ㄧ綉缁滃嚭鐜伴棶棰樻椂鎵嶄細灏嗙姸鎬佸彉涓簉ejected銆傛崲鍙ヨ瘽璇达紝寮€鍙戜汉鍛橀渶瑕佹墜鍔ㄦ鏌ュ搷搴旂殑HTTP鐘舵€佷唬鐮侊細fetch().then((res)=>{if(res.ok){console.log("ok")returnres.json()}else{console.log("error")}}).then().catch((err)=>{console.log(err)})2.3FetchAPI瀹炴垬浜嗚В鍩烘湰灞炴€у拰鏂规硶鍚嶧etchAPI鏈€鍚庨€氳繃鍥涗釜缁忓吀瀹炰緥浠嬬粛濡備綍鍦ㄩ」鐩腑浣跨敤FetchAPI銆?.3.1鍙戦€丳OST璇锋眰浣跨敤FetchAPI鍙戦€丳OST璇锋眰闈炲父绠€鍗曪紝鍙渶灏唌ethod灞炴€ц缃负POST锛屽湪body灞炴€т腑娣诲姞璇锋眰鏁版嵁瀛楃涓插嵆鍙€俧etch("/api/submit",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:"John",age:30})}).then((res)=>{if(res.ok){returnres.json()}else{console.log("error")}}).then(data=>{console.log("鎴愬姛:",鏁版嵁);}).catch(error=>{console.error("閿欒:",閿欒);});2.3.2澶勭悊澶ф枃浠舵偍鍙互閫氳繃娴佸鐞嗘潵澶勭悊澶ф枃浠跺搷搴旓紝杩欏彲浠ヨ鎴戜滑鑺傜渷鏇村鐨勫唴瀛樺苟鑾峰緱鏇撮珮鐨勬€ц兘锛歠etch("large-file.jpg").then(response=>{constreader=response.body.getReader();returnnewReadableStream({start(controller){functionpush(){reader.read().then(({done,value})=>{if(done){controller.close();杩斿洖;}controller.enqueue(value);push();});}push();}});}).then(stream=&g鍚?newResponse(stream)).then(response=>response.blob()).then(myBlob=>{varobjectURL=URL.createObjectURL(myBlob);//鐢╫bjectURL鍋氱偣浠€涔坿);鏈緥涓紝浣跨敤fetch()鏂规硶璇锋眰涓€涓ぇ鍥剧墖鏂囦欢锛屼娇鐢╮esponse.body.getReader()鏂规硶鑾峰彇鍙鏁版嵁娴侊紝鐒跺悗浣跨敤ReadableStreamAPI浠庢祦鐗囦腑璇诲彇鍝嶅簲鏁版嵁piece锛岃€屽湪璇诲彇杩囩▼涓紝杩欐牱鍙互閬垮厤灏嗘暣涓ぇ鏂囦欢鍔犺浇鍒板唴瀛樹腑锛屼粠鑰岃В鍐冲唴瀛樼垎鐐哥殑闂銆?.3.3璺ㄥ煙鍙戦€佽姹備娇鐢‵etchAPI鍙戦€佽法鍩熻姹傜殑浠g爜濡備笅锛歠etch("https://example.com/data",{mode:"cors",credentials:"include"}).then((res)=>{if(res.ok){returnres.json()}else{console.log("error")}}).then(data=>{console.log("鎴愬姛:",data);}).catch(error=>{console.error("Error:",error);});璇锋敞鎰忥紝褰撲綘浼犲叆.fetch()鏂规硶鐨勫€兼槸Request鐨勫疄渚嬫椂锛宮ode鐨勯粯璁ゅ€兼槸cors銆傚綋浣犱笉闇€瑕佸悜鏈嶅姟鍣ㄤ紶閫抍ookie鏃讹紝浣犱笉闇€瑕佽缃甤redentials灞炴€с€?.FetchAPIvsXHRHttpRequestobject鍦ㄥ畬鏁翠粙缁嶄簡FetchAPI鐨勫唴瀹逛箣鍚庯紝鏄椂鍊欎粠鍔熻兘鐨勮搴︽€濊€僃etchAPI鍜孹HRHttpRequest瀵硅薄鐨勪娇鐢ㄦ椂鏈轰簡銆傝櫧鐒舵垜涔嬪墠缁欏嚭浜嗕竴涓畝鍗曠殑鏍囧噯锛氣€滃湪涓嶈€冭檻涓庢棫鐗堟祻瑙堝櫒鍏煎鐨勬儏鍐典笅锛屽缁堜娇鐢‵etchAPI锛佲€濅絾瀹為檯涓婏紝涓よ€呭湪鍔熻兘涓婅繕鏄湁涓€浜涘尯鍒殑銆?.1FetchAPI鐗规€?.1.1鏇存柟渚跨殑缂撳瓨鎺у埗鍦ㄤ娇鐢╔HRHttpRequest鏃讹紝鎴戜滑闇€瑕佸鎸囧畾鐨勮姹傚ご淇℃伅杩涜缂栫爜Cache-Control鎺у埗娴忚鍣ㄧ殑璧勬簮缂撳瓨琛屼负銆備絾鏄湪FetchAPI涓紝鎴戜滑鍙互鐩存帴鍦╫ptions涓紶鍏ache灞炴€э紝瀹冨寘鍚互涓嬪瓧娈碉細default锛氫紭鍏堜娇鐢ㄦ祻瑙堝櫒鐨勬湁鏁堢紦瀛樿祫婧愶紝褰撶紦瀛樿祫婧愯繃鏈熸椂锛屽悜鏈嶅姟鍣ㄨ繘琛屾潯浠舵煡璇紝濡傛灉璧勬簮杩囨湡锛屽彂閫佹柊鐨勮姹傦紱no-store锛氫粠涓嶄娇鐢ㄦ祻瑙堝櫒缂撳瓨锛岀洿鎺ュ彂閫佽姹傦紝鑾峰彇鍝嶅簲鏃朵笉鏇存柊娴忚鍣ㄧ紦瀛橈紱reload锛氫粠涓嶄娇鐢ㄦ祻瑙堝櫒缂撳瓨锛岀洿鎺ュ彂閫佽姹傦紝浣嗘槸寰楀埌鍝嶅簲涔嬪悗鏇存柊缂撳瓨锛沶o-cache:馃毃娉ㄦ剰杩欓噷涓嶆槸鈥滀笉缂撳瓨鈥濈殑鎰忔€濓紝鑰屾槸姣忔妫€鏌ユ祻瑙堝櫒缂撳瓨璧勬簮鏃讹紝涓嶇璧勬簮鏄惁杩囨湡锛岄兘鍚戞湇鍔″櫒杩涜鏉′欢鏌ヨ锛沠orce-cache锛氬己鍒朵娇鐢ㄦ祻瑙堝櫒缂撳瓨锛屼笉绠¤祫婧愭槸鍚﹁繃鏈燂紝濡傛灉娌℃湁缂撳瓨鐨勮祫婧愶紝鍒欏彂閫佽姹傦紱only-if-cached锛氬悓force-cache锛屼絾鏄綋娌℃湁缂撳瓨璧勬簮鏃讹紝娴忚鍣ㄥ搷搴?04鐘舵€侊紙璇ユā寮忎粎鍦╩ode:"same-origin"閰嶇疆涓嬪彲鐢級锛?.1.2鏇存柟渚跨殑CORS鎺у埗涓嬩竴绔犳垜浠細娣卞叆璁ㄨ璺ㄥ煙闂銆傚湪Web涓栫晫涓紝涓轰簡璁块棶涓嶅悓鏉ユ簮鐨勮祫婧愶紝闇€瑕佸鎴风鍜屾湇鍔″櫒绔殑閫氬姏鍚堜綔銆?绫讳技浜庣紦瀛樻帶鍒讹紝FetchAPI涓烘垜浠彁渚涗簡mode鍜宑redentials涓や釜閰嶇疆灞炴€э紝璁╁紑鍙戣€呭彲浠ユ洿鏂逛究鐨勬寚瀹氳姹傛槸鍚﹁法鍩燂紝鏄惁闅忚姹傚彂閫乧ookie绛夎韩浠戒俊鎭€俢redentials灞炴€у寘鍚笁涓彲閫夊€硷細omit锛氫粠涓嶅彂閫佹垨鎺ユ敹cookie锛涘悓婧愶細浠呭綋璇锋眰鍦板潃涓庡綋鍓嶅湴鍧€鍚屾簮鏃舵墠鍙戦€乧ookies锛堥粯璁わ級锛涘寘鎷細涓嶅垎鍚屾簮鍦板彂閫乧ookies锛?.1.3鏇存柟渚跨殑閲嶅畾鍚戞帶鍒跺浜嶺HRHttpRequest瀵硅薄锛屽鏋滆鎷掔粷鏈嶅姟鍣ㄥ搷搴旂殑閲嶅畾鍚戝懡浠わ紝闇€瑕佹墽琛寈hr.followRedirect=false鎸囦护銆傚湪FetchAPI涓紝姝ら」涔熻璁捐涓轰竴涓厤缃€夐」redirect锛屽畠鏈?涓彲閫夊€硷細follow锛氬惉浠庢湇鍔″櫒鐨勬剰瑙佸苟閲嶅畾鍚戯紱error锛氱洿鎺ユ姏鍑洪敊璇紝杩涘叆.catch()娴佺▼锛沵anual:鎷掔粷閲嶅畾鍚戯紝杩斿洖鏈嶅姟鍣ㄤ俊鎭紝鐢卞紑鍙戣€呮帶鍒讹紱3.1.4鏀寔鏇村鐨勬暟鎹牸寮廥MLHttpRequest鍜孎etchAPI鍦ㄨ繑鍥炲搷搴斿疄浣撴椂閮芥彁渚涗簡澶氱鏁版嵁鏍煎紡锛歑MLHttpRequest鎻愪緵浜嗗嚑绉嶅父鐢ㄧ殑鏁版嵁鏍煎紡锛屼緥濡傦細responseText锛氳繑鍥炲瓧绗︿覆鏍煎紡鐨勫搷搴斿疄浣擄紱responseXML锛氳繑鍥瀀ML鏍煎紡鐨勫搷搴斿疄浣擄紱response锛氳繑鍥濧rrayBuffer銆丅lob鎴朏ormData鏍煎紡鐨勫搷搴斿疄浣擄紱FetchAPI鎻愪緵浜嗘洿澶氱殑鏁版嵁鏍煎紡锛屼緥濡傦細arrayBuffer()锛氳繑鍥濧rrayBuffer鏍煎紡鐨勫搷搴斿疄浣擄紱blob()锛氳繑鍥濨lob鏍煎紡鐨勫搷搴斿疄浣擄紱formData()锛氳繑鍥濬ormData鏍煎紡鐨勫搷搴斿疄浣擄紱json()锛氳繑鍥濲SON鏍煎紡鐨勫搷搴斿疄浣擄紱text()锛氳繑鍥炲瓧绗︿覆鏍煎紡鐨勫搷搴斿疄浣擄紱3.1.5鏀寔鏈嶅姟鍣ㄤ娇鐢ㄤ笂闈㈡彁鍒帮紝褰揘ode鐗堟湰澶т簬17.5鏃讹紝鍙互鐩存帴浣跨敤FetchAPI銆?.2XHRHttpRequest鐙湁鐨勭壒鎬х浉淇$湅鍒拌繖閲岋紝浣犲凡缁忓彲浠ラ€氳繃瀵规瘮涓婁竴绡囦粙缁嶇殑XHRHttpRequest瀵硅薄锛屾€荤粨鍑篎etchAPI缂哄け鐨勭壒鎬т簡銆傛槸鐨勶紝鐩稿浜嶺HRHttpRequest瀵硅薄锛孎etchAPI锛氭棤娉曟煡璇㈣姹傜殑杩涘害锛涗笉鑳芥寚瀹氳姹傝秴鏃舵椂闂达紱涓嶈兘涓璇锋眰锛涙棤娉曡幏寰楁洿璇︾粏鐨勫搷搴斾俊鎭紱涓嶆敮鎸佷綆鐗堟湰娴忚鍣紱涓嶈繃闇€瑕佹敞鎰忕殑鏄紝铏界劧FetchAPI缂哄皯杩欎簺鍔熻兘锛屼絾骞朵笉浠h〃鎴戜滑涓嶈兘閫氳繃鍏朵粬鏂瑰紡瀹炵幇銆備緥濡傦紝瀵逛簬涓璇锋眰锛孎etchAPI瀹為檯涓婃彁渚涗簡鍙︿竴涓叏灞€绫伙細AbortController()鏉ユ墽琛屾鎿嶄綔锛歝onstcontroller=newAbortController();fetch("/service",{鏂规硶:"GET",signal:controller.signal,}).then((res)=>res.json()).then((json)=>console.log(json)).catch((error)=>console.error("Error:",error));controller.abort();4.鎬荤粨鍦ㄦ湰鏂囦腑锛屾垜鍚戞偍浠嬬粛浜咶etchAPI鐨勬柟鏂归潰闈紝骞跺姣斾簡涓婁竴绡囨枃绔犱腑浠嬬粛鐨刋HRHttpRequest瀵硅薄锛屽悜鎮ㄥ睍绀轰簡杩欎袱涓狝JAXAPI鍦ㄨ璁°€佸唴瀹广€佺紪鐮佸拰鍔熻兘涓婄殑宸紓銆傛€荤殑鏉ヨ锛孹HRHttpRequest鐨凙PI璁捐姣旇緝鍘熷锛屽紑鏀句簡鏇村簳灞傜殑鑳藉姏锛屼絾鏄湁寰堝ソ鐨勬祻瑙堝櫒鏀寔锛岃€孎etchAPI鍩轰簬Promise寰堝ソ鐨勫皝瑁呬簡鍐呭锛屾毚闇蹭簡寰堝瀹炵敤鐨勬柟娉曠粰鐢ㄦ埛鍜屽睘鎬с€傝嚦姝わ紝浣犲簲璇ュ彲浠ヨ交鏉惧湴浣跨敤JavaScript鍙戦€丄JAX璇锋眰锛屽苟鍦ㄤ互鍚庣殑API璁捐涓簲鐢ㄤ竴浜汧etchAPI鐨勮璁℃€濇兂銆傛垜寰堥珮鍏翠綘鑳戒竴璺湅鍒拌繖涓€鐐广€備笅涓€绡囨枃绔犲皢涓哄ぇ瀹朵粙缁岮JAX鎶€鏈殑鏈€鍚庝竴涓篃鏄渶鍏抽敭鐨勮瘽棰橈細鈥滃浣曡法鍩熻姹傝祫婧愨€濓紝鏁鏈熷緟銆?.鍙傝€冭祫鏂橣etchAPIMDNAjaxBattle:XMLHttpRequestvsFetchAPI褰撴垜浠湁XMLHttpRequest涓轰粈涔堣繕瑕佽璁′竴涓猣etchAPI锛?/p>