axios是通過Promise實現(xiàn)對ajax技術(shù)的一種封裝，就像jquery對ajax的封裝一樣，axios回來的數(shù)據(jù)是promise，ajax回來的數(shù)據(jù)是回調(diào)，axios比ajax更好用更安全。簡單來說就是ajax技術(shù)實現(xiàn)了局部數(shù)據(jù)的刷新，axios實現(xiàn)了對ajax的封裝；axios有的ajax都有，ajax有的axios不一定有。總結(jié)一句話就是axios是ajax，ajax不止axios。

一、ajax與axios前言

發(fā)送網(wǎng)絡(luò)請求的方式有很多，下面來簡單介紹一下：

1、傳統(tǒng)的Ajax是基于XMLHttpRequest（XHR）

2、jQuery - Ajax

為什么不適用jQuery的Ajax？

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

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

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

4、尤雨溪推薦使用axios。

二、ajax與axios的區(qū)別

傳統(tǒng) Ajax 指的是 XMLHttpRequest（XHR）， 最早出現(xiàn)的發(fā)送后端請求技術(shù)，隸屬于原始js中，核心使用XMLHttpRequest對象，多個請求之間如果有先后關(guān)系的話，就會出現(xiàn)回調(diào)地獄。
JQuery ajax 是對原生XHR的封裝，除此以外還增添了對JSONP的支持。經(jīng)過多年的更新維護，真的已經(jīng)是非常的方便了，優(yōu)點無需多言；如果是硬要舉出幾個缺點，那可能只有：

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

Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax，想必讓axios進入了很多人的目光中。axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實現(xiàn)版本，符合最新的ES規(guī)范，它本身具有以下特征：

• 從瀏覽器中創(chuàng)建 XMLHttpRequest
• 支持 Promise API
• 客戶端支持防止CSRF
• 提供了一些并發(fā)請求的接口（重要，方便了很多的操作）
• 從 node.js 創(chuàng)建 http 請求
• 攔截請求和響應(yīng)
• 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
• 取消請求
• 自動轉(zhuǎn)換JSON數(shù)據(jù)

三、Vue中axios的使用

一、發(fā)送并發(fā)請求

有的時候，會同時發(fā)送多個請求。

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

axios.all([])返回的是一個數(shù)組，使用axios.spread可以將數(shù)組[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)
		}))
	}
}

三、創(chuàng)建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: {}
})

四、總結(jié)

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

axios是一個基于promise 的 http庫，主要實現(xiàn) ajax異步通信功能，用于向后端發(fā)起請求，還有在請求中做更多是可控功能；ajax是對原生XHR的封裝；axios實現(xiàn)對 ajax封裝，ajax實現(xiàn)局部數(shù)據(jù)的刷新；

到此這篇關(guān)于Vue為何棄用Ajax，選擇Axios？ajax與axios的區(qū)別的文章就介紹到這了,更多相關(guān)Vue中的Axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論