一、axios
axios是基于promise对Ajax的一种封装
ajax 基于mvc
axios 基于 mvvm
二、axios的基本使用
//使用默认方式发送无参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent',//这里是请求的路径
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作 //处理结果
console.log(res);
});
//默认请求方式为get请求
get请求
get无参请求
//使用get方式发送无参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent', //这里是请求的路径
method :'get'
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作
console.log(res);
});
get有参请求方式一
//使用get方式发送有参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent?id=1', //带参数的请求可以直接把需要携带的参数写在路径 //后面以?属性名=参数值 这样的形式书写带参请求
method :'get'
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作
console.log(res);
});
get有参请求方式二
//使用get方式发送有参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent',
params:{ //使用params对象 书写参数 以 属性名:'属性值' 的方式书写参数
id:'1',
name:'张三'
}
method :'get'
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作
console.log(res);
});
post请求
post无参请求
//使用post方式发送无参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent', //这里是请求的路径
method :'post'
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作
console.log(res);
});
post有参请求方式一 使用params方式携带参数
//使用post方式发送有参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent', //这里是请求的路径
method :'post',
params:{
name:'张三'
}
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作
console.log(res);
});
post有参请求方式二 使用data方式携带参数
//使用post方式发送有参请求
//在js文件/ts文件或者<script></script>标签中使用
//基本格式如下：
axios({
url:'http://localhost:9999/student/getAllStudent', //这里是请求的路径
method :'post',
data:{
name:'张三' //
}
})).then(res=>{ //用res箭头函数接收数据 then是接收数据之后的操作
console.log(res);
});
//后台控制器接收到的name null axios使用post携带参数请求默认使用application/json
//解决方式一：（客户端）及前端处理方式
//使用params属性代替data属性进行数据的传递
//解决方式二：（客户端）及前端处理方式
//('http://localhost:9999/student/getAllStudent'，"name=张三")
//想要传递多个数据直接在后面添加&
//('http://localhost:9999/student/getAllStudent'，"name=张三&age=20").
//解决方式三：服务器端给接收的参数加上@requestBody
//
三、axios请求方式
get请求
get无参请求
//get无参请求
//语法如下：
axios.get('http://localhost:9999/student/getAllStudent').then(res=>{
console.log(res);
}).catch(err=>{ //直接调用catch
console.log(err);
})
get有参请求
//get无参请求
//语法如下：
//将params写为一个对象 在里面又以对象的形式书写参数
axios.get('http://localhost:9999/student/getAllStudent'，{params:{id:1}}).then(res=>{
console.log(res);
}).catch(err=>{ //直接调用catch
console.log(err);
})
post请求
post无参请求
//post无参请求
//语法如下：
axios.post('http://localhost:9999/student/getAllStudent').then(res=>{
console.log(res);
}).catch(err=>{ //直接调用catch
console.log(err);
})
post有参请求
//post有参请求
//语法如下：
//直接将数据写在路径后面
axios.post('http://localhost:9999/student/getAllStudent'，"name=张三").then(res=>{
console.log(res);
}).catch(err=>{ //直接调用catch
console.log(err);
})
四、rxios并发请求
axios 的并发请求
//axios 的并发请求
//基础语法如下
axios.all([
axios.get('http://localhost:9999/student/getAllStudent'), //无参请求
axios.get('http://localhost:9999/student/getAllStudent',{params:{id:1}}) //有参请求
]).then(res=>{ //请求成功响应的是一个函数
console.log(res);
}).catch(err=>{
console.log(err);
})
使用spread方法处理请求结果
//使用spread方法处理请求结果
//基础语法如下
axios.all([
axios.get('http://localhost:9999/student/getAllStudent'), //无参请求
axios.get('http://localhost:9999/student/getAllStudent',{params:{id:1}}) //有参请求
]).then(
axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
})
).catch(err=>{
console.log(err)
})
五、axios全局配置
axios全局配置基本语法
axios.defaults.baseURL:'http://localhost:9999/student/getAllStudent'； //配置全局请求路径
axios.defaults.timeout=5000;
axios.get('getAllStudent').then(res=>{ //getAllStudent 为后台接口的名称
console.log(res);
}).catch(err=>{
console.log(err);
});
axios.post('pGet').then(res=>{ //pGet 为后台接口的名称
console.log(res);
}).catch(err=>{
console.log(err);
})
六、axios实例
//axios实例
//基础语法
let newVar = axios.create({
baseURL:'http://localhost:9999/student/getAllStudent'，
timeout:5000
});
newVar({
url:'getAllStudent'
}).then(res=>{
console.log(res);
})
七、axios拦截器
拦截器的基本概念
axios提供了两大类拦截器 一种是请求方向的拦截（成功、失败）另外一种是响应方向的（成功、失败）
拦截器的作用：用于网络请求的时候在发起请求或者响应时对操作进行响应的处理
发起请求时 可以添加页面加载的动画 强制登陆
响应请求时 可以进行相应的数据处理
请求方向拦截器
//请求方向
//基础语法
axios.inerceptors.request.use(config=>{
console.log("进入请求拦截器");
console.log(config);
return config; //请求成功一定要记得放行请求
},err=>{
console.log("请求方向失败");
console.log(err);
});
axios.get('http://localhost:9999/student/getAllStudent').then(ree=>{
console.log(res);
})
响应方向拦截器
//响应方向
//基础语法
axios.inerceptors.response.use(config=>{
console.log("进入请求拦截器");
return config.data;
},err=>{
console.log("请求方向失败");
console.log(err);
});
axios.get('http://localhost:9999/student/getAllStudent').then(ree=>{
console.log(res);
})
八、axios在vue中的模块封装
基础封装 ：封装位置
//封装位置 文件位置
import axios from 'axios'
export function request(config,success,fail){
axios({
url:config
}).then(res=>{
success(res);
}).catch(err=>{
fail(err);
})
}
//调用位置
import {request} from './network/request/request'
request('http://localhost:9999/student/getAllStudent/getAllStudetn',res=>{
console.log(res);
}),err=>{
console.log(err);
}
第二种封装方式
//封装位置
import axios from 'axios'
export function request(config,success,fail)
axios.defaults.baseURL='http://localhost:9999/student/getAllStudent/getAllStudetn'；
axios(config.url
).then(
res=>{
config.success(res);
}).catch(err=>{
config.fail(err);
})
//调用位置
import {request} from './network/request/request'
request({
url:'getAllStudent',
success:res=>{
console.log(res);
},fail:err=>{
console.log(err);
}
})
第三种封装方式
//模块封装位置
import axios from 'axios';
let newVar = axios.create({
baseURL:'http://localhost:9999/student/student',
timeout:5000
});
return new Promise((resolve,reject) => {
newVar(config).then(res=>{
resolve(res);
}).catch(err=>{
reject(err);
})
})
//调用位置
import {request} from'./network/request/request';
request({
url:'getAllStudent'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
第四种封装方式 且最常用
//封装位置
export function request(config){
import axios from 'axios';
let newVar = axios.create({
baseURL:'http://localhost:9999/student/student',
timeout:5000
});
return newVar(config);
}
//调用位置
import {request} from'./network/request/request';
request({
url:'getAllStudent'
}).then(res=>{
console.log(res);
})
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
