亲宝软件园·资讯

展开

Vue为何弃用Ajax,选择Axios?ajax与axios的区别?

人气:0

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的支持。经过多年的更新维护,真的已经是非常的方便了,优点无需多言;如果是硬要举出几个缺点,那可能只有:

Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,想必让axios进入了很多人的目光中。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:

三、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实现局部数据的刷新;

加载全部内容

相关教程
猜你喜欢
用户评论