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