国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Ajax、Fetch、Axios三者的區(qū)別

這篇具有很好參考價(jià)值的文章主要介紹了Ajax、Fetch、Axios三者的區(qū)別。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

AJax

概念:Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。是一種網(wǎng)絡(luò)請(qǐng)求的概念框架。
主要特點(diǎn):實(shí)現(xiàn)頁(yè)面局部刷新,主要使用js的XMLHttpRequest請(qǐng)求實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求。
主要缺點(diǎn):使用函數(shù)回調(diào)的方式實(shí)現(xiàn)異步請(qǐng)求,若請(qǐng)求里寫(xiě)請(qǐng)求將會(huì)導(dǎo)致回調(diào)地獄的發(fā)生。
示例代碼:

<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      //異步函數(shù)監(jiān)聽(tīng)
      xhr.onreadystatechange = function () {
        // 異步回調(diào)函數(shù)
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("響應(yīng)結(jié)果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')
  </script>
</body>

Fetch

概念:使用ES6中提出的promise實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求是Ajax的替代品,是真實(shí)存在的請(qǐng)求API。不是對(duì)Ajax的封裝。
代碼:

  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>

主要特點(diǎn):

  1. 使用promise的方式進(jìn)行網(wǎng)絡(luò)請(qǐng)求,支持async / await;
  2. 采用模塊化請(qǐng)求,語(yǔ)法簡(jiǎn)潔更加語(yǔ)義化,例如Request 、 Response,可讀性較好;
  3. 脫離XHR,采用新的實(shí)現(xiàn)方式。

主要缺點(diǎn):

  1. 只對(duì)網(wǎng)絡(luò)請(qǐng)求錯(cuò)誤進(jìn)行reject,而對(duì)服務(wù)器返回的400或者500 都會(huì)被當(dāng)做成功的請(qǐng)求;
  2. 不支持終端和超時(shí)處理,造成資源流量的浪費(fèi);
  3. 沒(méi)辦法監(jiān)聽(tīng)請(qǐng)求的進(jìn)度;
  4. 默認(rèn)不會(huì)帶cookie,需要手動(dòng)添加配置;

Axios

概念:它是一個(gè)基于XHR二次進(jìn)行封裝的HTTP請(qǐng)求庫(kù);
代碼:

// 發(fā)送 POST 請(qǐng)求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})

主要特點(diǎn):

  1. 瀏覽器端發(fā)起XMLHTTPRequest請(qǐng)求;
  2. node端發(fā)起http請(qǐng)求;
  3. 可進(jìn)行請(qǐng)求終端;
  4. 可監(jiān)聽(tīng)請(qǐng)求和返回;
  5. 支持Promise API;
  6. 可中斷請(qǐng)求;
  7. 可自動(dòng)轉(zhuǎn)換json格式
  8. 客戶端支持轉(zhuǎn)換XSRF攻擊;
  • axios和vue沒(méi)關(guān)系,axios也不是隨著Vue的興起才廣泛使用的,axios本身就是獨(dú)立的請(qǐng)求庫(kù),跟用什么框架沒(méi)關(guān)系;而且最初Vue官方推薦的請(qǐng)求庫(kù)是vue-resouce,后來(lái)才推薦的axios;
  • axios不是xhr的子集,axios利用xhr進(jìn)行了二次封裝的請(qǐng)求庫(kù),xhr只是axios中的其中一個(gè)請(qǐng)求適配器,axios在nodejs端還有個(gè)http的請(qǐng)求適配器;axios = xhr + http

注意??

axios和vue是沒(méi)關(guān)系的,它并不是隨著vue的興起而被廣泛使用的,而是axios本身就是一個(gè)獨(dú)立的請(qǐng)求庫(kù),跟使用的框架并沒(méi)有關(guān)系;最初vue官方推薦的請(qǐng)求庫(kù)是vue-resouce,后來(lái)才推薦使用axios;axios是利用了xhr進(jìn)行的二次封裝庫(kù),xhr只是其中的一個(gè)http請(qǐng)求適配器;Axios = XHR + HTTP;文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-852366.html

到了這里,關(guān)于Ajax、Fetch、Axios三者的區(qū)別的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 前端如何中斷請(qǐng)求 ( axios、原生 ajax、fetch)

    使用場(chǎng)景 在前端開(kāi)發(fā)中,我們經(jīng)常需要中斷請(qǐng)求來(lái)優(yōu)化性能或處理特定的業(yè)務(wù)需求。以下是一些常見(jiàn)的使用場(chǎng)景: 比如 重復(fù)請(qǐng)求:當(dāng)頁(yè)面中多個(gè)組件并發(fā)調(diào)用同一個(gè)接口時(shí),在第一個(gè)請(qǐng)求返回后,我們可能需要中斷其他組件對(duì)該接口的調(diào)用,以避免重復(fù)請(qǐng)求和冗余數(shù)據(jù)。這

    2024年02月04日
    瀏覽(43)
  • JS面試題之a(chǎn)jax、axios、fetch的區(qū)別

    AsynchronousJavascriptAndXML 異步JavaScript和XML 它是一種創(chuàng)建 交互式 網(wǎng)頁(yè)應(yīng)用的 網(wǎng)頁(yè)開(kāi)發(fā)技術(shù) 。 它是一種在 無(wú)需重新加載整個(gè)網(wǎng)頁(yè) 的情況下,能夠 更新部分網(wǎng)頁(yè) 的技術(shù)。 通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,Ajax可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。 這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)

    2023年04月23日
    瀏覽(35)
  • 前端請(qǐng)求數(shù)據(jù)方法 —— Ajax、Fetch、Axios、Get、Post

    Ajax :( “Asynchronous JavaScript and XML”(異步JavaScript和XML)的縮寫(xiě))是一組Web開(kāi)發(fā)技術(shù),Ajax不是一種技術(shù),而是一個(gè)編程概念。AJAX 這個(gè)詞就成為 JavaScript 腳本發(fā)起 HTTP 通信的代名詞,也就是說(shuō),只要用腳本發(fā)起通信,就可以叫做 AJAX 通信。 技術(shù)實(shí)現(xiàn) 用于演示的HTML(或 XHTML)和

    2024年01月22日
    瀏覽(29)
  • ajax和fetch的區(qū)別

    ajax 和 fetch的相同點(diǎn)和區(qū)別是什么? 以前我們都用ajax去做請(qǐng)求, 但是原生的ajax不好用,我們會(huì)用$.ajax或者axios插件去請(qǐng)求,他們都是ajax的封裝 最近出來(lái)個(gè)fetch是什么? 問(wèn)到這里的時(shí)候,你就已經(jīng)入坑了, 因?yàn)?ajax只是一個(gè)異步xhr解決方案的概念,不能和fetch這個(gè)api同日而語(yǔ)

    2024年02月11日
    瀏覽(18)
  • Vue中如何使用Ajax請(qǐng)求是通過(guò)第三方庫(kù)axios或者原生的fetch API來(lái)實(shí)現(xiàn)的

    在Vue中使用Ajax請(qǐng)求通常是通過(guò)第三方庫(kù),比如axios或者原生的fetch API來(lái)實(shí)現(xiàn)的。這里我將為你展示如何使用axios庫(kù)在Vue中進(jìn)行Ajax請(qǐng)求。 首先,你需要安裝axios庫(kù)。你可以通過(guò)npm或者yarn來(lái)安裝: 使用npm: bash? ? ?復(fù)制 npm install axios 或者使用yarn: bash 復(fù)制 yarn add axios 安裝完成后

    2024年04月13日
    瀏覽(109)
  • 前端數(shù)據(jù)處理:AJAX與Fetch API深入解析

    前端數(shù)據(jù)處理是Web開(kāi)發(fā)中不可或缺的一部分,它涉及到如何從服務(wù)器獲取數(shù)據(jù),并將其轉(zhuǎn)換為易于處理的格式。AJAX和Fetch API是兩種常用的前端數(shù)據(jù)處理技術(shù),它們都允許開(kāi)發(fā)人員在不重新加載整個(gè)頁(yè)面的情況下更新部分頁(yè)面內(nèi)容。AJAX(Asynchronous JavaScript and XML)是一種異步請(qǐng)求

    2024年02月21日
    瀏覽(20)
  • ajax和axios有什么區(qū)別?

    ajax和axios有什么區(qū)別?

    1、ajax和axios有什么區(qū)別? ajax特點(diǎn): ?? ?1.異步的XML和JavaScript ?? ?2.可以運(yùn)行瀏覽器 不可以運(yùn)行在node ?? ?3.發(fā)送給后臺(tái)數(shù)據(jù)需要手動(dòng)轉(zhuǎn)換 請(qǐng)求頭手動(dòng)設(shè)置 ?? ?4.后端響應(yīng)的數(shù)據(jù)需要自己轉(zhuǎn)換/json格式 axios特點(diǎn): ?? ?1.基于promise的http庫(kù) ?? ?2.可以調(diào)用promise的api ?? ?3.axi

    2024年02月08日
    瀏覽(22)
  • 前端學(xué)習(xí)--Ajax(3) XHR/axios

    1.1 概念 XMLHttpRequest(XHR)是一種用于在客戶端和服務(wù)器之間發(fā)送HTTP請(qǐng)求的JavaScript API。它允許客戶端在不重新加載整個(gè)頁(yè)面的情況下向服務(wù)器發(fā)送請(qǐng)求,并根據(jù)服務(wù)器的響應(yīng)更新頁(yè)面的局部?jī)?nèi)容。Ajax是基于XHR封裝的。 1.2 使用xhr發(fā)起get請(qǐng)求 步驟 創(chuàng)建XHR對(duì)象 調(diào)用XHR.open()函數(shù)

    2023年04月26日
    瀏覽(25)
  • 前端開(kāi)發(fā)中的ajax請(qǐng)求、axios封裝

    前端開(kāi)發(fā)中的ajax請(qǐng)求、axios封裝

    目錄 瀏覽器http請(qǐng)求 同步?js標(biāo)簽跨域、url 異步ajax、websock協(xié)議 ajax是異步的技術(shù)術(shù)語(yǔ),最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封裝axios(無(wú)論用requst還是axios請(qǐng)求都會(huì)生效) src/utils/request.ts請(qǐng)求/響應(yīng)攔截器封裝 ts post請(qǐng)求request.post(url)和 通用請(qǐng)求request({url,method:\\\'post\\\'})對(duì)象

    2024年02月11日
    瀏覽(70)
  • 前端同步異步講解--Ajax(axios進(jìn)階)的相關(guān)操作

    前端同步異步講解--Ajax(axios進(jìn)階)的相關(guān)操作

    之前我們講到了數(shù)據(jù)在前后端傳輸是依賴xml文件,但是由于時(shí)代變遷,他也已經(jīng)比逐步淘汰,json對(duì)象就逐步開(kāi)始作為數(shù)據(jù)傳輸通道的橋梁,忘記的話可以去回顧文章對(duì)應(yīng)的json對(duì)象 最全的前端知識(shí)之css與jsp介紹-CSDN博客 文章瀏覽閱讀1k次,點(diǎn)贊31次,收藏21次。ok了,寶子們,

    2024年02月21日
    瀏覽(26)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包