这篇笔记主要讲一下axios基本的发送ajax请求的方法
axios在当前的前端行业里面是用的比较热门的一个
下面给大家分享一下它axios的一个基本用法
这段代码包含了post 跟get方法
在这里就不给大家一一的写出来了 大家如果真的想了解这个的话 也可以去到axios的官方文档里面 里面有更多更详细的介绍噢。
在这里解析一下 这个baseURL是对路径的一个简化 相当于定义一个固定的前缀参数 当我们后面用到的时候就可以省略前面固定的代码
只需要在后面的接口跟上路径名称即可,这样可以大大的节省我们在调试开发的时的 时间。
//baseURL是对路径的一个简化
//配置baseURL
axios.defaults.baseURL = "http://localhost:8000";
下面这个是完整的案例
这里说明一下axios是可以下载安装到电脑 也可以引用cnd,大家可以选择自己方式。
我这里调试的地址是自己搭建的一个服务器地址,大家用的时候可以改成自己的地址,如果没有自己的地址也可以搭建一个,
如果不会搭建大家可以看我前面的笔记Express框架的简单使用。
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
const btns = document.querySelectorAll("button");
//baseURL是对路径的一个简化
//配置baseURL
axios.defaults.baseURL = "http://localhost:8000";
btns[0].onclick = function(){
//GET请求
// axios.get()
axios.get('/axios',{
//参数
params:{
id:100,
vip:9
}
// //请求头信息
// headers:{
// name:'at-lili'
// }
}).then(re =>{
console.log(re);
})
}
btns[1].onclick = function(){
axios.post('/axios',{
params:{
id: 007,
vip:225
},
//请求头
Headers:{
height:186,
wight:90
},
//请求体
data:{
user:'admin',
pass:'admin'
}
})
}
</script>