本次將介紹如何使用Fetch API(ES6 +)對REST API的 HTTP請求,還有一些示例提供給大家便于大家理解。
注意:所有示例均在帶有箭頭功能的 ES6中給出。
當前的Web /移動應用程序中的一種常見模式是從服務器請求或顯示某種數(shù)據(jù)(例如用戶,帖子,評論,訂閱,付款等),然后使用CRUD(創(chuàng)建-Create,閱讀-Retrieve,更新-Update或刪除-Delete)操作。
為了進一步操作資源,我們經(jīng)常使用這些JS方法(推薦),例如  .map(),  .filter()和  .reduce()。
一下就是我們要解決的問題:
1.處理JS的異步HTTP請求
JavaScript(JS)的工作原理是最具有挑戰(zhàn)性的部分之一是理解如何處理異步請求,這需要理解promises和回調是如何工作的。
在大多數(shù)編程語言中,我們都認為操作按順序(順序)發(fā)生。必須先執(zhí)行第一行才能繼續(xù)下一行。這個道理顯而易見,因為這是我們自己就是這么操作或者是工作的,當然你也可以選擇邊聽歌邊寫代碼(O(∩_∩)O哈哈~);
但是使用JS,我們有多個在后臺/前臺運行的操作,并且我們不能在每次等待用戶事件時都凍結一個Web應用程序。
將JavaScript描述為異步可能會產(chǎn)生一些誤導。更準確地說,JavaScript是同步的,并且具有各種回調機制的單線程。
但是有些事情必須按順序發(fā)生,否則會導致流程混亂和產(chǎn)生意外結果。出于這個原因,我們可以使用promises和callback來構建它。舉例:在某個操作之前需要驗證用戶憑據(jù)才能進行這個操作。
2.什么是AJAX
AJAX代表異步JavaScript和XML,它允許在應用程序運行時通過與Web服務器交換數(shù)據(jù)來異步更新網(wǎng)頁。簡而言之,它實質上意味著您可以更新網(wǎng)頁的各個部分而無需重新加載整個頁面(URL保持不變的情況下)。
AJAX是一個誤導性的名稱。AJAX應用程序可能使用XML來傳輸數(shù)據(jù),但將數(shù)據(jù)作為純文本或JSON文本傳輸同樣很常見。
- w3shools.com
AJAX一路走來?
許多開發(fā)人員對在單頁應用程序(SPA)中擁有所有特性感到非常興奮,但是這也會導致很多異步痛苦!但幸運的是,我們有像Angular,VueJS和React這樣的庫,所以在寫SPA應用的時候會更加簡單和易用。
總的來說,如何平衡重新加載整個頁面或加載部分頁面就顯得非常重要了。
在大多數(shù)情況下,頁面重新加載在瀏覽器日益完善的功能下已經(jīng)表現(xiàn)的非常好了。要是在以前,頁面重新加載需要幾秒鐘(取決于服務器的位置和瀏覽器功能)。但是今天的瀏覽器非常快,所以決定是否執(zhí)行AJAX或頁面重新加載的區(qū)別并不大。
新聞熱點
疑難解答
圖片精選