脚本宝典收集整理的这篇文章主要介绍了axios笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
// 默认使用get方式请求
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://localhost:8080/student'
}).then(res=>{
console.LOG(res);
})
</script>
// get方式的无参请求
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://localhost:8080/student',
method:'get'
}).then(res=>{
console.log(res);
})
</script>
// get方式的有参请求:
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://localhost:8080/student?id='+id,
method:'get'
}).then(res=>{
console.log(res);
})
</script>
// get方式有参其他方式请求:
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://localhost:8080/student',
params:{
id:'1'
}
method:'get'
}).then(res=>{
console.log(res);
})
</script>
// post方式的无参请求
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://localhost:8080/student/pGet',
method:'post'
}).then(res=>{
console.log(res);
})
</script>
// post方式的有参请求:(不推荐这种方式,用1.2.4的例子比较好)
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios({
url:'http://localhost:8080/student/pGet',
method:'post',
// 如果使用data传递数据,
// 后台控制器接收到的name是null,axios使用post携带参数请求默认使用application/json
//解决方式一:params属性传递数据
//解决方式二:"name=张三"
//解决方式三:服务器端给接收的参数加上@RequestBody注解
params:{
name:'张三'
}
}).then(res=>{
console.log(res);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.get('http://localhost:8080/student/pGet').then(res=>{
console.log(res);
}).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.get('http://localhost:8080/student/findStudentById',{params:{id:1,name:zhangsan}}).then(res=>{
console.log(res);
}).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.post('http://localhost:8080/student/pGet').then(res=>{
console.log(res);
}).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.post('http://localhost:8080/student/findStudentByName',"name=张三&age=10").then(res=>{
console.log(res);
}).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.post('http://localhost:8080/student/findStudentByName',{name:'张三'}).then(res=>{
console.log(res);
}).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
这个时候服务端参数必须用@RequestBody注解,参数为一个对象:
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('http://localhost:8080/student/getAllStudent'),
axios.get('http://localhost:8080/student/finstudentById',{params:{id:1}})
]).then(res=>{ // 请求成功,返回的是一个数组
console.log(res[0]);
console.log(res[1]);
}).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('http://localhost:8080/student/getAllStudent'),
axios.get('http://localhost:8080/student/finstudentById',{params:{id:1}})
]).then(
axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
})
).catch(err=>{
// 捕获出错
consolt.log(err);
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
// 配置全局属性
axios.defaults.baseURL="http://localhost:8080/student";
axios.defaults.timeout=5000;
// 在全局配置的基础上去网络请求
axios.get('/getname').then(res=>{
console.log(res);
})
axios.post('/pGet').then(res=>{
console.log(res)
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
// 创建axios一个实例
let newVAR = axios.create({
baseURL:"http://localhost:8080/student",
timeout:5000
});
// 使用实例
newVar({
url:'getAllStudent'
}).then(res=>{
console.log(res)
})
</script>
axios提供了两大拦截器: 一种是 请求 方向的拦截(成功的,失败的) 另一种是 响应 方向的(成功的,失败的)
拦截器的作用:用于在网络请求的时候在发起请求或者响应时对操作进行相应的处理。 发起请求时可以添加到网页加载的动画 使用token认证时 强制登录。 响应的时候可以进行响应的数据处理。
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
// 两个参数
// axios.interceptors.request.use(config=>{},err=>{})
axios.interceptors.request.use(config=>{
console.log("进入请求拦截器");
console.log(config);
return config; // 放行请求
},err=>{
console.log("请求方向失败");
console.log(err);
})
axios.get("http://localhost:8080/student/getAllStudent").then(res=>{
console.log(res)
})
</script>
<script src="https://unpkg wangt.cc /axios/dist/axios.min.js"></script>
<script>
// 两个参数
axios.interceptors.response.use(config=>{
console.log("进入响应拦截器");
console.log(config);
// 拿到响应结果的data属性,其实就是对返回数据进行处理的作用
// 没有return,数据是回不来的
return config.data;
},err=>{
console.log("响应方向失败");
console.log(err);
})
axios.get("http://localhost:8080/student/getAllStudent").then(res=>{
console.log(res)
})
</script>
npm install axios --save
在自己写的文件中:
// 封装位置 文件位置 ./network/request/request.js
import axios @R_406_2150@ 'axios'
export function request(config,success,fail){
axios({
url:config,
}).then(res=>{
success(res);
}).catch(err=>{
fail(err);
})
}
使用:比如在main.js中测试:
// 调用位置
import {request} from "./network/request/request"
request("http://localhost:8080/student/getAllStudent",res=>{
console.log(res);
},err=>{
console.log(err);
})
在自己写的文件中:
// 封装位置 文件位置 ./network/request/request.js
import axios from 'axios'
export function request(config){
axios.defaults.baseURL="http://localhost:8080/student";
axios(config.url).then(res=>{
config.success(res);
}).catch(err=>{
config.fail(err);
})
}
使用:比如在main.js中测试:
// 调用位置
import {request} from "./network/request/request"
request({
url:'/getAllStudent',
success:res=>{
console.log(res);
},
fail:err={
console.log(err);
}
})
在自己写的文件中:
// 封装位置 文件位置 ./network/request/request.js
import axios from 'axios'
export function request(config){
let newVar = axios.create({
baseURL:"http://localhost:8080/student",
timeout:5000
});
return new Promise((resolve, reject)=>{
newVar(config).then(res=>{
resolve(res);
}).catch(err=>{
reject(err);
})
})
}
使用:比如在main.js中测试:
// 调用位置
import {request} from "./network/request/request"
request({
url:'/getAllStudent'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
在自己写的文件中:
// 封装位置 文件位置 ./network/request/request.js
import axios from 'axios'
export function request(config){
let newVar = axios.create({
baseURL:"http://localhost:8080/student",
timeout:5000
});
return newVar(config);
}
使用:比如在main.js中测试:
// 调用位置
import {request} from "./network/request/request"
request({
url:'/getAllStudent'
}).then(res=>{
console.log(res);
})
以上是脚本宝典为你收集整理的axios笔记全部内容,希望文章能够帮你解决axios笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。