1. 程式人生 > 實用技巧 >promise axios ajax 的區別詳解

promise axios ajax 的區別詳解

介紹axios和promise
一、axios的介紹

  1. axios 是由 promise 封裝的一個 http 的庫。
  2. promise是 es6 為解決非同步程式設計的。
    什麼是非同步?
      1. 不會按照瀏覽器的載入方式 由上到下。
  3. 前端哪裡面有非同步?
      1. 回撥函式
      2. 定時器
      3. 事件繫結
      4. ajax
    二、列舉一個例子
  4. 針對這個例子 會出現 層層回撥函式的巢狀 我們稱為(回撥地獄)
  5. 這樣很不好 對我們後期的維護也很麻煩,所以出現了 promise
    在這裡插入圖片描述

axios是通過promise實現對ajax技術的一種封裝,就像jQuery實現ajax封裝一樣。
簡單來說: ajax技術實現了網頁的區域性資料重新整理,axios實現了對ajax的封裝。

axios是ajax ajax不止axios。

優缺點:
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,幫助我們處理佇列