Axios
一个在Vue和React中常用的发送AJAX请求的库，基于Promise和AJAX实现
支持async/await用法
发送AJAX请求
axios发送请求后返回一个Promise对象，所以可以使用Promise的方法对它指定回调函数
axios发送的请求中包含以下常用属性：
method：String，设置请求类型url：url，请求的目标端口号data：一个对象，其中以键值对存储数据。请求体，前端发送给后端的请求信息- ......
格式：
axios({
method:'xxx',
url:'xxx',
data:{
//....
}
}).then(response => {
//拿到服务端返回的响应体对象后，对请求到的数据反馈进行后续处理
}).catch(function(error){
//出错的处理
}).then(function(){
//总是会执行的代码，类似于Java的try-catch中的finall
})
通过axios传递相关配置来发送请求，将整个配置项对象作为参数传入
axios(config)
发送GET(读)请求
const btns = document.querySelectorAll('button'); //获取句柄
btns[0].event = function(){ //触发某一事件时触发该函数，使用axios发送请求
axios({
methods: 'GET', //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
url: 'http://localhost:3000/get', //向哪个端口号发送请求
}).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
console.log(response.data);
});
}
// 还可以使用get()方法发送GET请求
function getinfo(url){
return axios.get(url); //返回的是response响应体
}
发送POST(增)请求，返回的response是添加的信息的对象，如果要添加的信息已经存在于服务器中，则会有以下报错
const btns = document.querySelectorAll('button'); //获取句柄
btns[1].event = function(){ //触发某一事件时触发该函数，使用axios发送请求
axios({
methods: 'POST', //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
url: 'http://localhost:3000/posts', //向哪个端口号发送请求
//发送POST请求需要设置请求体data，里面放的是让服务器添加的信息的键值对
data:{
title: "关于Vue实现xxx功能的方法",
author: "AC"
}
}).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
console.log(response.data[0].title);
});
}
发送PUT(更新)请求
需要在URL末尾传入要更改数据项的ID。PUT请求的请求体中的信息就是要让目的id更新的信息
const btns = document.querySelectorAll('button'); //获取句柄
btns[2].event = function(){ //触发某一事件时触发该函数，使用axios发送请求
axios({
methods: 'POST', //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
url: 'http://localhost:3000/posts/3', //接收请求的端口号，发送PUT请求要传入要更改数据项的id
//要求更新的信息，返回的response中是目的id对象更新后的信息
data:{
title: "关于Vue实现xxx功能的方法2.0",
author: "AC"
}
}).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
console.log(response);
});
}
发送DELETE请求
const btns = document.querySelectorAll('button'); //获取句柄
btns[3].event = function(){ //触发某一事件时触发该函数，使用axios发送请求
axios({
methods: 'DELETE', //methods属性设置发送请求的类型 - GET(查)、POST(增)、PUT(改)、DELETE(删)
url: 'http://localhost:3000/posts/3', //接收请求的端口号，让服务器删除该ID的信息
}).then(response => { //对响应头进行处理，response对象中包含的是服务端根据该请求发送回来的数据
console.log(response);
});
}
axios(url[, config])
// 默认发起GET请求
axios('http://localhost:3000/posts?params1=xxx¶ms2=yyy')
其他方式发送请求
使用request()方法发送AJAX请求
/*发送GET请求*/
axios.request({
method: 'GET',
url: 'xxx'
}).then(response => {
//...
})
/*发送POST请求，注意参数格式变化*/
axios.post(
'http://localhost:3000/xxx', //第一个参数，请求的端口号url
//第二个参数，一个对象，里面是需要要添加的信息，使用键值对
{
"userId":"jack",
"userAccount": 123456,
"otherInfo": "xxx"
},
//第三个参数，配置对象
).then(response => {
//....
})
发起多个并发请求并使用Promise进行处理
function getInfo1(){
return axios.get('xxx'); //端口
}
function getInfo2(){
return axios.get('xxx');
}
//使用Promise的all()方法，将多个response作为一个数组传入，然后在then里进行处理
Promise.all([getInfo1(), getInfo2()]).then(function(res){
console.log(res[0].data);
console.log(res[1].data);
})
其他请求方式别名
使用别名时，不用在配置项中再写入url、method、data
axios配置对象
配置对象中可以设置以下内容，这里写出常见的
{
url: '', //请求服务器的url
baseURL: '', //使用了baseURL，url就用/xxx，服务器会自动将baseURL拼接在url之前（注意此时url不能是绝对url）
//举个例子： baseURL: 'http://localhost:3000/', url: '/posts‘
//则拼接之后: 'http://localhost:3000/posts'
transformRequest: [function(data, headers){
//预处理请求头中的数据, 然后将处理完的结果发送到服务器
//只可以在POST、PUT、PATCH请求中使用
return xxx;
}],
transformRespnse: [function(data) {
//对接收到的响应头信息进行预处理
return data;
}],
//自定义头信息携带的标签
headers: {'X-Requested-With': 'XMLHttpRequest'}
//params携带请求头中url的参数， 就是?之后的内容，比如 ?articleId=1315
//params应当是一个简单对象
params: {
articleId: 1315,
key: value,
//...
},
//发送请求的超时时间，如果发送请求的时间超过了这个时间，那么请求发送就会取消，默认值为0
timeout: XXX
}
响应体Response结构
{
data:{
// 服务器回应客户端响应的直接数据结果
},
status: 404, // 服务器的HTTP状态码，详见https://blog.csdn.net/weixin_49904442/article/details/126858357
statusText: '', // 服务器相应的HTTP状态信息
headers: {
// 服务器响应头
},
config: {
// axios请求的配置信息
},
request: {
// 生成响应的请求
//浏览器中是 XMLHttpRequest 实例
}
}
axios默认配置
全局默认配置
这将作用于项目中每个axios请求
axios.defaults.配置项 = xxx
自定义实例配置
使用axios的create()方法创建一个实例，从而可以动态修改axios配置的值, 或者是实时使用axios实例，建议使用这种方式
const ins = axios.create({
baseURL: "http://localhost:3000",
url: "/comments"
});
//实时修改配置的值
ins.defaults.url = "posts";
//实时操作
ins.get('http://localhost:3000/posts', {
id: 1,
timeout: 500
})
//当然也可以创建一个空的实例，再实时设置值
const ins2 = axios.create();
ins2.defaults.baseURL = "http://localhost:3000/posts?id=1";
配置的优先级
配置合并的优先级：库默认值 > 实例的defaults属性 > 请求中设置的config参数
Axios拦截器interceptors
在请求或响应被then或catch处理前拦截将其拦截，进行操作
添加拦截器
// 添加到原型上
axios.interceptors.request.use(config => {
//对config或其他传入参数进行处理
return config; //或者传入的参数等等，这里返回需要的
}), function(error){ //注意这里是逗号 ,
//处理响应错误, 2xx状态码都会触发这个
}
//创建一个axios实例然后添加到实例上
const ins = axios.create();
ins.interceptors.request.use(params => {
//处理
})
//以上是对request添加的拦截器，还可以对response添加
移除拦截器 --> interceptors.eject()方法
axios.interceptors.request.eject(拦截器名称)
错误处理
打印HTTP错误信息：使用toJSON()方法错误信息转为JSON字符串
axios.get(url).catch(error => {
console.log(err.toJSON());
})
对不同状态码进行处理，或者自定义抛出错误的HTTP状态码
使用validateStatus配置选项
//在配置项中
axios.get(url, {
validateStatus: status => {
//return status == xxx;
//return status <= xxx;
if(status == xxx){
//...
}else{
//...
}
}
})
取消请求
AbortController - 中止控制器
v0.22.0版本的axios开始，支持使用Fetch API中的AbortController来取消请求
AbortController接口表示一个控制器对象，可以使用它中止一个或多个Web请求
使用步骤
//先调用接口创建一个AbrotController实例
const controller = new AbrotController();
//然后通过signal属性获取到AbortSignal（中止信号对象）的引用
const signal = controller.signal;
axios.get('url', {
//配置项中传入中止信号对象，以便进行中止管理
//也可以在配置项中获取中止信号对象： signal: controller.signal;
signal: signal;
}).then(response => {
//...
})
//使用中止控制器实例调用abort()方法取消请求
controller.abort();
当abort()被调用中止请求时，fetch() Promise会抛出AbortError
