從ajax到fetch

ajax 的起源

  • Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)

  • Ajax 不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。

  • 使用 JavaScript 向服務(wù)器提出請(qǐng)求并處理響應(yīng)而不阻塞用戶！核心對(duì)象XMLHTTPRequest。通過(guò)這個(gè)對(duì)象，您的 JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)，即在不需要刷新頁(yè)面的情況下，就可以產(chǎn)生局部刷新的效果。

伴隨我們操作真實(shí)DOM日子里，jquery 的ajax怕是我們使用最多的了。所以接下來(lái)我們來(lái)重溫一下我們的 $.ajax()

ajax 的使用

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

ajax 詳細(xì)使用屬性及方法，這里貼一個(gè)地址，詳細(xì)介紹可參考：http://www.w3school.com.cn/jquery/ajax_ajax.asp

接下來(lái)迎來(lái)了我們輝煌的es6時(shí)代，應(yīng)運(yùn)而生了很多，比如vue,比如react,比如被強(qiáng)烈推薦的axios

axios的起源

image.png

這里要掛一個(gè)瀏覽器支持情況，事實(shí)上，axios是對(duì)ajax的封裝，并拋出的promise對(duì)象，還沒(méi)看過(guò)源碼，不知道這樣說(shuō)對(duì)不對(duì)，等看過(guò)后回來(lái)填坑。
所以可知為什么axios不支持ie10以下

  • ie10不支持promise對(duì)象
  • ie8、9采用的是不是XMLHTTPRequest對(duì)象，而是XDomainRequest對(duì)象，
    axios本質(zhì)是對(duì)XMLHTTPRequest進(jìn)行的封裝，所以當(dāng)然支持不了啦。

官方可知的幾大特性：

  • node.js 創(chuàng)建 http 請(qǐng)求(也就是它可以在服務(wù)器上處理轉(zhuǎn)發(fā)，不怕跨域啦)
// `auth` 表示 HTTP 基礎(chǔ)驗(yàn)證應(yīng)當(dāng)用于連接代理，并提供憑據(jù)
// 這將會(huì)設(shè)置一個(gè) `Proxy-Authorization` 頭，覆寫(xiě)掉已有的通過(guò)使用 >`header` 設(shè)置的自定義 `Proxy-Authorization` 頭。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
 username: 'mikeymike',
  password: 'rapunz3l'
 }
},

還是那句話，本作者還未踩過(guò)坑，等踩過(guò)再來(lái)填

  • 客戶端支持防止CSRF
    這個(gè)還是蠻有意思的哈，其實(shí)就是cookie攜帶key,所以關(guān)于瀏覽器，js本質(zhì)的東西支撐我們走到現(xiàn)在。

axios的使用

EXAMPLE

get請(qǐng)求

// 為給定 ID 的 user 創(chuàng)建請(qǐng)求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請(qǐng)求可以這樣做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post請(qǐng)求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

多個(gè)并發(fā)請(qǐng)求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個(gè)請(qǐng)求現(xiàn)在都執(zhí)行完成
  }));

是不是很熟悉，這個(gè)語(yǔ)法簡(jiǎn)直和jquery的ajax一個(gè)模子嘛，所以建議如果兼容要求不高的同學(xué)完全放心食用。貼個(gè)官方地址：https://www.kancloud.cn/yunye/axios/234845

fetch的起源

fetch是下一個(gè)ajax技術(shù)，采用promise方式處理數(shù)據(jù)
是一種簡(jiǎn)潔明了的API，比XMLHttpRequest更加簡(jiǎn)單易用。
掛一張瀏覽器支持率

image.png

這里要開(kāi)罵了，這咋辦嘛，手機(jī)端應(yīng)該沒(méi)毛病，pc端怕是要被開(kāi)除哦。不要怕，同學(xué)們，我們的輪子大神們，什么都想好了好哇。whatwg-fetch支持到IE10，其他瀏覽器也支持。不支持ie9及下，是因?yàn)閄MLHTTPRequest對(duì)象，與axios問(wèn)題類(lèi)似。

fetch是直接掛載在BOM上的，所以遲早會(huì)都支持，入駐W3C是遲早的事情，同學(xué)們大膽用。掛一個(gè)學(xué)習(xí)地址吧：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

為什么使用 Fetch API？

十多年來(lái)，XMLHttpRequest 對(duì)象一直被 AJAX 操作所接受，但是我們知道，XMLHttpRequest 對(duì)象的 API 設(shè)計(jì)并不是很好，輸入、輸出、狀態(tài)都在同一個(gè)接口管理，容易寫(xiě)出非常混亂的代碼。那么Fetch API就應(yīng)勢(shì)而生，提供了一種新規(guī)范，用來(lái)取代善不完美的 XMLHttpRequest 對(duì)象。

Fetch API 主要有兩個(gè)特點(diǎn)：一是接口合理化，AJAX 是將所有不同性質(zhì)的接口都放在 XHR 對(duì)象上，而Fetch是將它們分散在幾個(gè)不同的對(duì)象上，設(shè)計(jì)更合理；二是Fetch操作返回 Promise 對(duì)象，避免了嵌套的回調(diào)函數(shù)。

html部分
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
--------------------------------------------------------------
js部分
--------------------------------------------------------------
var myImage = document.querySelector('.my-image');
fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
    .then(res => res.blob())
    .then(res => {
        var objectURL = URL.createObjectURL(res);
        myImage.src = objectURL;
});

fetch請(qǐng)求后通過(guò)第一個(gè)then()返回一個(gè)promise對(duì)象:

  • Body.arrayBuffer()
    采取一個(gè)Response流，并將其讀入完成。它返回一個(gè)promise對(duì)象，使用一個(gè)ArrayBuffer reslove。
  • Body.blob()
    采取一個(gè)Response流，并將其讀入完成。它返回一個(gè)promise對(duì)象，使用一個(gè)Blob reslove。
  • Body.formData()
    采取一個(gè)Response流，并將其讀入完成。它返回一個(gè)promise對(duì)象，使用一個(gè)FormData對(duì)象reslove。
  • Body.json()
    采取一個(gè)Response流，并將其讀入完成。它返回一個(gè)promise對(duì)象，使用JSON對(duì)象reslove。
  • Body.text()
    采取一個(gè)Response流，并將其讀入完成。它返回一個(gè)用USVString（文本）來(lái)解決的promise reslove。響應(yīng)總是使用UTF-8進(jìn)行解碼。

就是說(shuō)，fetch的第一個(gè)then()內(nèi) return 以上不同的promise對(duì)象，promise有2個(gè)參數(shù)，一個(gè)reslove,一個(gè)reject, 這里掛一個(gè)promised的學(xué)習(xí)地址：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
fetch請(qǐng)求后通過(guò)第二個(gè)then()接收上一個(gè)then()返回的promise對(duì)象

EXPLAME

get請(qǐng)求

// 通過(guò)fetch獲取百度的錯(cuò)誤提示頁(yè)面
fetch('https://www.baidu.com/search/error.html') // 返回一個(gè)Promise對(duì)象
  .then((res)=>{
    return res.text() // res.text()是一個(gè)Promise對(duì)象
  })
  .then((res)=>{
    console.log(res) // res是最終的結(jié)果
  })

post請(qǐng)求

// 通過(guò)fetch獲取百度的錯(cuò)誤提示頁(yè)面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST' // 指定是POST請(qǐng)求
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

有參數(shù)的post請(qǐng)求

// 通過(guò)fetch獲取百度的錯(cuò)誤提示頁(yè)面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這里是請(qǐng)求對(duì)象,也可以JSON.srtingfy([["foo", 1],["bar", 2]]),看后端需要的格式
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

fetch基本使用

fetch(url, {
    headers: {'Cache-Control': 'no-cache'},//請(qǐng)求頭
    method:  'POST',//請(qǐng)求方法
    mode: 'no-cors',//模式是否為跨域,值：cors、no-cors,no-cors不會(huì)發(fā)送跨域請(qǐng)求
    body: JSON.stringify({})//請(qǐng)求參數(shù)
}).then(function() { /* handle response */ });

今天就到這里了，接下來(lái)去啃一下axios源碼，再來(lái)填坑.

歡迎指正，強(qiáng)烈歡迎

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容