基本知識
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 僅顯示被模式匹配到的字串,而非整行...