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

一、ajax與axios前言

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

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

2、jQuery - Ajax

為什么不適用jQuery的Ajax？

在vue開發(fā)中不需要使用jQuery，因?yàn)閖Query很重量級(jí)。

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

Vue-resource角jQuery輕便很多，但在vue2.x之后，尤雨溪對(duì)Vue-resource不維護(hù)了，簡(jiǎn)言之，就是棄用了。

4、尤雨溪推薦使用axios。

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

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

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

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

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

三、Vue中axios的使用

一、發(fā)送并發(fā)請(qǐng)求

有的時(shí)候，會(huì)同時(shí)發(fā)送多個(gè)請(qǐng)求。

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

axios.all([])返回的是一個(gè)數(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實(shí)例

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

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

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

最新評(píng)論