Vue为何弃用Ajax，选择Axios？ajax与axios的区别？

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