promise axios ajax 的區別詳解
阿新 • • 發佈:2020-10-12
介紹axios和promise
一、axios的介紹
- axios 是由 promise 封裝的一個 http 的庫。
- promise是 es6 為解決非同步程式設計的。
什麼是非同步?
1. 不會按照瀏覽器的載入方式 由上到下。 - 前端哪裡面有非同步?
1. 回撥函式
2. 定時器
3. 事件繫結
4. ajax
二、列舉一個例子 - 針對這個例子 會出現 層層回撥函式的巢狀 我們稱為(回撥地獄)
- 這樣很不好 對我們後期的維護也很麻煩,所以出現了 promise
axios是通過promise實現對ajax技術的一種封裝,就像jQuery實現ajax封裝一樣。
簡單來說: ajax技術實現了網頁的區域性資料重新整理,axios實現了對ajax的封裝。
優缺點:
ajax:
本身是針對MVC的程式設計,不符合現在前端MVVM的浪潮
基於原生的XHR開發,XHR本身的架構不清晰,已經有了fetch的替代方案
JQuery整個專案太大,單純使用ajax卻要引入整個JQuery非常的不合理(採取個性化打包的方案又不能享受CDN服務
axios:
從 node.js 建立 http 請求
支援 Promise API
客戶端支援防止CSRF
提供了一些併發請求的介面(重要,方便了很多的操作)
為什麼vue不使用ajax用axios:
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,本質上也是對原生XHR的封裝,只不過它是Promise的實現版本,符合最新的ES規範,它本身具有以下特徵:
從瀏覽器中建立 XMLHttpRequest
支援 Promise API
客戶端支援防止CSRF
提供了一些併發請求的介面(重要,方便了很多的操作)
從 node.js 建立 http 請求
攔截請求和響應
轉換請求和響應資料
取消請求
自動轉換JSON資料
promise是什麼?
1、主要用於非同步計算
2、可以將非同步操作佇列化,按照期望的順序執行,返回符合預期的結果
3、可以在物件之間傳遞和操作promise,幫助我們處理佇列