目录
一、前言
axios作用:用于web页面和服务器端数据的访问与传输。
二、axios 发送请求的方式(重要)
方式一:直接使用
axios({
//请求类型
method: 'GET',
//Url
url: ' http://localhost:3000/posts/2',
//发送给服务端的数据 key: "value" ,或者 "key" : "value" 单双引号都没问题
data: {
title:"今天天气好",
author: "张三",
}
}).then(response=>{
//回调 获取服务端返回的数据
console.log(response);
});
then :自定义成功的回调函数;
catch:自定义失败的回调函数
方式二:使用request方法 ,使用方式和直接使用一致
//请求
but1[0].onclick=function(){
axios.request({
method:'POST',
url: 'http://localhost:3000/posts',
data:{
title: "request",
author: "发送数据"
}
}).then(response=>{
console.log(response);
})
}
//请求
but1[0].onclick=function(){
axios.request({
method:'POST',
url: 'http://localhost:3000/posts',
data:{
"title": "request",
"author": "发送数据第二次"
}
}).then(response=>{
console.log(response);
})
}
方式三 、通过已经封装好的方法发送
(1)、POST axios.post(url,JSON).then( lambda表达式)
以及其他的方法
//发送POST请求
but1[1].onclick=function(){
//
axios.post(
'http://localhost:3000/comments',
{
"body": "成功",
"postId": 1
}
).then(response=>{
console.log(response);
})
}
三、响应结果,服务端返回的数据
then(response=>{});
response从服务端得到的数据:
config: 包含请求内容(请求类型、请求体、url等)。
data: 响应体的结果, JSON对象 (服务器返回的结果数据)
headers: 响应头信息
request: 原生的AJAX请求对象
status: 响应状态码
statusText: 响应的状态字符串
四、axios配置对象
url: '/user',
method: 'get', //默认是get提交方法
baseURL: '', //设置好之后可以直接发送请求路径,不用再写请求和协议
transformRequest:[function(data,haeders){ //对请求的数据进行处理,处理完成后再发送给服务器
return data;
}],
transformResponse: [function(data,haeders){ //可以对响应的结果进行改变
return data;
}],
headers:{},// 对请求头信息进行配置
params:{ //设置url参数
ID:123
},
paramsSerializer:function(params){ //d对请求参数进行序列化转换成字符串
}
等
五、axios默认设置(重要)
//默认设置
axios.defaults.method='GET'; //设置默认请求
axios.defaults.baseURL= 'http://localhost:3000'; //设置url请求前部分,url就可以只设置后部分
axios.defaults.params={id:100};// 添加URL上的请求参数 ?id=100
axios.defaults.timeout=3000; //超时时间 毫秒 时间过后请求超时,停止当前请求
示例:
//默认设置
axios.defaults.method='GET'; //设置默认请求
axios.defaults.baseURL= 'http://localhost:3000'; //设置url请求前部分,url就可以只设置后部分
axios.defaults.params={id:100};// 添加URL上的请求参数 ?id=100
axios.defaults.timeout=3000; //超时时间 毫秒 时间过后请求超时,停止当前请求
but1[0].onclick=function(){
axios({
method:'GET',
url: '/posts',// baseURL 已经设置了默认的后部分
}).then(response=>{
console.log(response);
})
}
六、创建实例对象发送axios请求(重要)
后端有多个放服务器进行数据传输时 用这种方式结构更加清除
1、创建实例对象
通过axios.create() 方法创建
const duanzi=axios.create({ //通过axios.create创建的对象duanzi同样具有axios的功能
baseURL: 'https://api.apiopen.top', //设置默认url头部
tiemout: 2000 //设置超时时间
})
2、 使用创建好的对象
这里duanzi 与axios对象功能几近是一样的
//和axios 一样能直接使用
duanzi(
{
url: '/getJoke'
}
).then(respons=>{
console.log(respons);
})
3、 创建的对象也能使用封装好的方法
duanzi.get('/getJoke').then(response=>{
console.log(response);
})
七、拦截器(重要)
请求拦截器:在发送请求之前可以借助 函数来对请求参数和内容进行处理和检测,没问题直接发 送,出现问题可以停止或取消请求的发送
响应拦截器: 当服务器返回结果后,处理返回结果之前先对结果进行预处理或格式化处理.
发送请求 执行顺序 请求拦截器==>服务器==>响应拦截器==>自定义成功回调函数
正常顺序 : 请求拦截器成功回调==>响应拦截器成功回调==>自定义成功回调函数then
请求拦截器成功回调函数出错: 请求拦截器成功回调出错==>响应拦截器失败回调==>自定义失败回调函数catch
请求拦截器
request: axios.interceptors.request.use(成功回调函数,失败回调函数)
响应拦截器
response: axios.interceptors.response.use(成功回调函数,失败回调函数)
自定义回调函数:
then :自定义成功的回调函数;
catch:自定义失败的回调函数
示例:
//和Promise有关
//设置请求拦截器 自定义参数config 就是配置对象,可以对请求内容进行修改
axios.interceptors.request.use(function (config){
config.params={a:100};//在请求拦截器中对参数进行修改
console.log(config);
console.log("请求拦截器 成功");
// throw '出错';
return config;
},function(error){
console.log('请求拦截器 失败');
return Promise.reject(error);
} );
//设置响应拦截器 自定义响应参数 response 只有响应体数据(服务器返回来的数据)
axios.interceptors.response.use(function (response){
console.log("响应拦截器 成功");
return response;
},function(error){
console.log('响应拦截器 失败');
return Promise.reject(error);
} )
axios({
method:'GET',
url: 'http://localhost:3000/posts'
}).then(respons=>{
console.log("自定义成功回调函数");
console.log(respons);
}).catch(reason=>{
console.log("自定义失败回调函数");
});
八、axios取消请求
通过cancelToken 创建一个可取消的函数 axios.CancelToken
var cancel=null; //创捷的取消请求函数,也可以用来判断当前请求是否执行完 未执行完就为 取消请求方法,执行完后就在then赋值为null
//按下发送当前请求
but1[4].onclick=function(){
axios({
method:'GET',
url:'http://localhost:3000/posts',
//1.添加配置对象的属性
cancelToken: new axios.CancelToken(function(c){
//将c的值赋值给cancel, cancel() 方法就具有了取消当前请求的能力
cancel=c;
})
}).then(respo=>{
console.log(respo);
cancel=null;//赋值为null,表示请求已经执行完,当前请求过程不再需要 取消请求方法
})
}
//按下按钮取消对应的请求的发送
but1[5].onclick=function(){
if(cancel!==null){ //请求未执行完才能取消请求
cancel(); //直接调用cancel()方法取消请求
}
}
仅供学习参考,有错误还请在评论区指出