Vue為何棄用Ajax，選擇Axios？ajax與axios的區別？

Posted on by

axios是通過Promise實現對ajax技術的一種封裝，就像jquery對ajax的封裝一樣，axios回來的數據是promise，ajax回來的數據是回調，axios比ajax更好用更安全。簡單來說就是ajax技術實現瞭局部數據的刷新，axios實現瞭對ajax的封裝；axios有的ajax都有，ajax有的axios不一定有。總結一句話就是axios是ajax，ajax不止axios。

一、ajax與axios前言

發送網絡請求的方式有很多，下面來簡單介紹一下：

1、傳統的Ajax是基於XMLHttpRequest（XHR）

2、jQuery – Ajax

為什麼不適用jQuery的Ajax？

在vue開發中不需要使用jQuery，因為jQuery很重量級。

3、vue官方在Vue1.x的時候，推出瞭Vue-resource。

Vue-resource角jQuery輕便很多，但在vue2.x之後，尤雨溪對Vue-resource不維護瞭，簡言之，就是棄用瞭。

4、尤雨溪推薦使用axios。

二、ajax與axios的區別

傳統 Ajax 指的是 XMLHttpRequest（XHR）， 最早出現的發送後端請求技術，隸屬於原始js中，核心使用XMLHttpRequest對象，多個請求之間如果有先後關系的話，就會出現回調地獄。
JQuery ajax 是對原生XHR的封裝，除此以外還增添瞭對JSONP的支持。經過多年的更新維護，真的已經是非常的方便瞭，優點無需多言；如果是硬要舉出幾個缺點，那可能隻有：

  • 本身是針對MVC的編程,不符合現在前端MVVM的浪潮
  • 基於原生的XHR開發，XHR本身的架構不清晰。
  • JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）
  • 不符合關註分離（Separation of Concerns）的原則
  • 配置和調用方式非常混亂，而且基於事件的異步模型不友好。

Vue2.0之後，尤雨溪推薦大傢用axios替換JQuery ajax，想必讓axios進入瞭很多人的目光中。axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，隻不過它是Promise的實現版本，符合最新的ES規范，它本身具有以下特征：

  • 從瀏覽器中創建 XMLHttpRequest
  • 支持 Promise API
  • 客戶端支持防止CSRF
  • 提供瞭一些並發請求的接口（重要，方便瞭很多的操作）
  • 從 node.js 創建 http 請求
  • 攔截請求和響應
  • 轉換請求和響應數據
  • 取消請求
  • 自動轉換JSON數據

三、Vue中axios的使用

一、發送並發請求

有的時候，會同時發送多個請求。

使用axios.all，可以放入多個請求的數組。

axios.all([])返回的是一個數組，使用axios.spread可以將數組[res1,res2]展開為res1和res2。

import axios from 'axios'

export default {
	name: 'app',
	created(){
		axios.all([axios.get('http://127.0.0.1:8080/getUserList'),
					axios.get('http://127.0.0.1:8080/getUserPage',{
						params: {pageNum: 1, pageSize: 10}
					})
		]).then(axios.spread((res1,res2) => {
			console.log(res1)
			console.log(res2)
		}))
	}
}

二、全局配置

import axios from 'axios'

export default {
	name: 'app',
	created(){
		// 提取全局配置
		axios.defaults.baseURL = 'http://127.0.0.1:8080'
		
		axios.all([axios.get('/getUserList'),
					axios.get('/getUserPage',{
						params: {pageNum: 1, pageSize: 10}
					})
		]).then(axios.spread((res1,res2) => {
			console.log(res1)
			console.log(res2)
		}))
	}
}

三、創建axios實例

const instance1 = axios.create({
  baseURL: 'http://127.0.0.1:8080',
  timeout: 5000
})

instance1({
  url: '/home/getUserList'
}).then(res => {
  console.log(res);
})

instance1({
  url: '/home/getUserPage',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})


const instance2 = axios.create({
  baseURL: 'http://127.0.0.1:8081',
  timeout: 10000,
  // headers: {}
})

四、總結

Axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中；是請求資源的模塊；通過promise對ajax的封裝。
簡單理解為：封裝好的、基於promise的發送請求的方法，因此不用設置回調函數，直接去調用then方法。
屬性：url、method、data、responseType、.then、.catch…

axios是一個基於promise 的 http庫，主要實現 ajax異步通信功能，用於向後端發起請求，還有在請求中做更多是可控功能；ajax是對原生XHR的封裝；axios實現對 ajax封裝，ajax實現局部數據的刷新；

到此這篇關於Vue為何棄用Ajax，選擇Axios？ajax與axios的區別的文章就介紹到這瞭,更多相關Vue中的Axios內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：