axios教程

Axios

概念

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。
上面的概念主要分为两部分：Promise + HTTP库。

Promise：用于帮助进行异步操作的对象，设置了成功与失败的两个回调函数，可以很好的帮助网络请求进行异步。

HTTP库：这个就更好理解了，axios是帮助进行网络传输请求的，现如今应用最广泛的便是HTTP协议，axios可以帮助进行HTTP请求的封装。

从上面的两个基本概念，我们就可以知道axios是干什么的了，是帮助客户端向服务器发送HTTP请求，并异步处理反馈数据的。

具体关于Promise的知识与HTTP知识点请看考我的ES6教程和计网教程。

特点

1、在浏览器中使用可以帮助生成XMLHttpRequest请求；
2、在node.js里面使用可以帮助生成http请求；
3、设置了请求、响应拦截器，可以预处理请求和返回数据；
4、支持Promise的API；
5、自动转换JSON数据；（默认传递的是JSON类型）
6、转换请求、响应数据；
7、可以取消请求；

请求

get

axios.get(url)
	.then(response=>{
		// ...
	}).catch(response=>{
		// ...
	})

当然，如果存在参数，有两种方式，一种是直接将参数写在url里面，另外一种则是写到config里面。

axios.get('/user?ID=123')

axios.get('/user', {
	params:{
		ID : 123
	}
})

得到的JSON数据，存储在 response.data 里面。（这涉及到HTTP知识点，请前往查看HTTP响应数据结构）。

POST

axios.post('/user/add', {
		ID : 124,
		name: 'xxx'
})
	.then()
	.catch()

axios API（我一般是使用这个，更清晰）

可以通过向 axios 传递相关配置来创建请求，axios(config)

axios({
	method: 'post',
	url: '/user/add',
	data: {
		ID: 124,
		name: 'xxx'
	}
})

创建实例

下面要创建一个 axios 实例。

var instance = new axios.create({
	baseURL: 'https://some-domain.com/api/',
	timeout: 1000,    // 超时时间
})

之后便可以利用这个实例来进行请求的创建。简单来讲，要先创建一个axios实例，然后用这个实例来调用请求和API。（特别适合各个结构之间降低耦合）

响应结构

响应，便是Promise对象回调后返回的response。（其实就是HTTP响应数据结构）

{
	data: {}, // 返回的数据
	status: 200, // HTTP状态，注意，可以利用这个状态码进行错误处理
	statusText: 'OK', // 服务器状态
	headers: {}, // 服务器响应头
	config: {} // 为请求提供的配置信息
}

使用

在Vue里面使用axios基本步骤：
1、安装axios

npm install axios

2、创建一个axios实例

var request = new axios.create({
	baseURL: 'https://some-domain.com/api/',
	timeout: 1000,
})

3、创建请求或API

request({
	method: 'post',
	url: '/user/add',
	data: {
		ID: 124,
		name: 'xxx'
	}
})
	.then(response => {
		console.log(response.data);
		console.log(response.status);
		console.log(response.statusText);
		console.log(response.headers);
		console.log(response.config);
	})
	.catch(error => {})

此刻请留意，请求创立后它实际上就是一个promise对象，有then和catch函数返回。

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

axios.interceptors.request.use(function (config) {
	// 在发送请求之前做些什么
	return config;
}, function (error) {
	// 对请求错误做些什么
	return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
	// 对响应数据做点什么
	return response;
}, function (error) {
	// 对响应错误做点什么
	return Promise.reject(error);
});

Axios底层实现

这里说一下axios的底层实现，实际上就是Ajax底层的XMLHttpRequest + Promise：

var axios = {
	get: (url) => {
		return new Promise((resolve, reject) => {
			var request = new XMLHttpRequest();
			request.open('get', url, true);
			request.onreadystatechange(() => {
				if(request.readystate == 4){
					if(request.status == 200){
						resolve(request.responseText);
					}
				}
			});
			request.send();
		});
	}
}

Ajax

AJAX创建异步对象XMLHttpRequest
操作XMLHttpRequest 对象

（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）

（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针

（3）获取异步对象的readyState 属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据。

（5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。

readyState属性

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了（这个时候就可以执行异步回调了）

Ajax源码实现

var xmlHttpRequest = new XMLHttpRequest();

// open方法为这次ajax请求设定相应的http方法，相应的地址和是否异步
xmlHttpRequest.open(get,'url',true);

// 调用send方法，这个方法可以设定需要发送的报文主体
xmlHttpRequest.send();

// 然后通过监听readystatechange事件
xmlHttpRequest.onreadystatechange(() => {
// 通过 readyState 属性来判断这个ajax请求状态，当状态为4的时候也就是接受数据完成
	if(xmlHttpRequest.readystate == 4){
	 // status属性判断这个请求是否成功
		if(xmlHttpRequest.status == 200){
			return xmlHttpRequest.responseText;
		}
	}
})

ajax、axios对比

根据上面的组成结构，我们首先分析ajax和axios：

1、ajax对异步后的执行操作包括在对象内部，这样子如果出现多个异步连环调用，将会很可怕；但是axios增加了Promise封装，将异步操作调离出对象，利用了API的then、catch来执行，更加简洁
2、axios因此支持Promise的API
3、axios增加了请求中止和撤销
4、axios增加了请求与响应拦截器，可以对请求之前与响应之后进行预处理
5、自动转换数据为JSON
6、axios可以让客户端防止CSRF