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

发布时间：2023-03-25 12:00

0、前言

Axios 是一个用于发出 HTTP 请求的 JavaScript 库，而 AJAX（异步 JavaScript 和 XML）是一种向服务器发出请求并更新网页部分内容而无需重新加载整个页面的技术。两者之间的主要区别在于 Axios 是一个库，而 AJAX 是一种技术。Axios 使发送和处理 HTTP 请求变得容易，而 AJAX 允许创建更复杂和自定义的请求。Axios 和 AJAX 都可以用来向服务器发出请求和更新网页，但 Axios 提供了更方便、更强大的 API 来实现这一点。

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