js基礎高階 從ajax到fetch的理解

2022-03-09 03:15:14 字數 2461 閱讀 8425

基本知識

1. ajax是什麼?

答:ajax是一種可以在瀏覽器和伺服器之間使用非同步資料傳輸(http請求)的技術。使用它可以讓頁面請求少量的資料,而不用重新整理整個頁面。而傳統的頁面(不使用ajax)要重新整理部分內容,必須過載整個網頁頁面。

2. ajax基於什麼?

答:它基於的是xmlhttprequest(xhr)。這是乙個比較粗糙的api,不符合關注分離的設計原則(separation of concerns),配置和使用都不是那麼友好。

3. ajax的庫?

答:基於上面的原因,各種ajax庫引用而生,然而最有名的就是jquery的api中的 $.ajax() 。 $.ajax() 它的乙個優勢非同步操作,但jquery的非同步操作是基於事件的非同步模型,沒有promise那麼友好。

4. fetch產生的背景?

答:綜合上面所講的各種因素,fetch這個api應運而生,它和xmlhttprequest都是瀏覽器window物件的原生api。但好用歸好用,它存在著一些問題(這個問題下面詳講,並講解相對應的解決方案),再加上相容性問題(ie11以下壓根不支援),所以很多開發者使用了axios這個第三方庫。

5. 支援promise的庫(axios)?

答:axios 這個庫現在是乙個比較通用的行業解決方案,axios 流行開來的乙個原因是promise,另乙個原因是基於資料操作的庫的流行(vue.js, angular.js, react.js等),而傳統的jquery是基於dom操作的庫。但它也存在著缺陷,就是我們使用前,要保證這個庫已經被引入。

其實,就我個人而言,我還是比較喜歡使用fetch的。在開發中遇到相容性的問題,只需要同構fetch即可,而不需要額外的引入乙個庫。下面就重點說一下fetch。

fetch 的使用

fetch(url, options)

.then(response => console.log(responese))

.catch(err => console.log(err))

response:請求返回的物件

then:正常返回資料

catch: 返回異常

請求引數配置 options 詳情可參考mdn fetch 我在這裡就不再贅述

fetch存在的問題及解決方案

fetch得到資料你需要兩個步驟

fetch('')

.then(res => )

.then(data => )

fetch的使用需要瀏覽器支援promise, fetch的返回值也是乙個promise物件;

通過上面的**,可以發現直接列印返回的 response 物件中壓根就沒有資料,要想獲取到所需的資料,必須經乙個中間的方法 response.text() (fetch提供了5中方法),如下:

// 具體功能請自行查閱

arraybuffer()

blob()

json()

text()

formdata()

axios.get('')

.then(res => console.log(res));

fetch的請求預設是不帶 cookie

解決這個問題,需要在 options 中配置

並非所有的請求錯誤都會 reject

也就是說 catch 方法並不能捕獲所有的錯誤,當錯誤可以用乙個狀態碼(如:404,500等)的形式表示時,fetch 返回的 promise 不會擁有reject,只有當網路故障或請求被阻止時 catch 才有效。

fetch('')

.then(res => else

}).then(data => )

.catch(err => )

當然,如果是用axios庫就不需要考慮這個問題,因為axios已經為我們封裝好了;

fetch和async、await在實際中一起使用

async和await是es7的api,在實際開發中加入一些polyfill庫,比如最流行的的babel,我們就可以使用它們了;

如果你還不了解它們,請跳轉至:用async/await來處理非同步

在實際中我們會經常遇到非同步巢狀的問題,比如:

fetch('')

.then(res => else

}).then(data => else

}).then(data => )

}).catch(err => )

上面就是在收到相應之後再發起乙個請求,這樣的**是不是看著很難受;

下面我們來用async和await改一下,感受一下用同步的方式寫非同步的感覺:

// 封裝aa

async function aa() catch(e)

}// 呼叫aa

aa()

看看上面的**是不是舒服多了 ,也簡單多了;

transform從基礎到高階到資料驅動

先來看乙個例子 旋轉 斜切 斜切 大家應該都能看的明白,這是用最原始的方法來實現動畫。簡單易懂,但是這樣的話我們會寫很多重複的 rotate.style.transform scale 2 這樣的 每個事件內部我們都要寫一遍。一般遇到重複 的時候,就可以考慮下是否可以封裝函式了,我們先從最簡單的引數...

Python 從基礎到高階 檔案物件

在python中,讀寫檔案有3個步驟 呼叫open 函式,返回乙個file物件 呼叫file物件的read 或write 方法 呼叫file物件的close 方法,關閉該檔案 呼叫open 將返回乙個file物件。file物件代表計算機中的乙個檔案,它只是python中另一種型別的值,就像你已熟悉的...

grep與egrep用法從基礎到高階高階

一 grep 國際音標 grep grep是shell指令碼中的文字搜尋工具,根據使用者指定的文字模式對目標檔案進行逐行搜尋,顯示能被模式所匹配到的行。格式 grep options pattern file,常用選項 v 反向匹配,顯示不能被模式所匹配到的行。o 僅顯示被模式匹配到的字串,而非整行...