axios最最基础的用法
axios闲来无事
ajax请求库，比较热门
目录 axios闲来无事一，axios的理解和使用二，axios的封装三，拦截器四，个人心的体会
一，axios的理解和使用
服了，看弹幕给我看的没自信了。
axios最基本的使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
<title>Document</title>
</head>
<body>
<div class="boxer">
<h1>axios的基本使用</h1>
<button class="btn btn-get">GET方法</button>
<button class="btn btn-post">POST方法</button>
<button class="btn btn-delete">DELETE方法</button>
<button class="btn btn-put">PUT方法</button>
</div>
<script>
const btns = document.querySelectorAll('button')
btns[0].onclick = function(){
axios({
method:'GET',
url:'http://localhost:3000/students'
}).then(response=>{
console.log(response)
})
}
btns[1].onclick = function(){
axios({
method:'POST',
url:'http://localhost:3000/students',
data:{
"name":"wds",
"age":18
}
}).then(response=>{
console.log(response)
})
}
</script>
</body>
</html>
{
"students": [
{
"id": 1,
"name": "wds",
"age": 21
},
{
"id": 2,
"name": "wds",
"age": 21
},
{
"id": 3,
"name": "wds",
"age": 21
},
{
"name": "wds",
"age": 18,
"id": 4
}
]
}
这里也是后来写的多了回来补个坑
当我们发送请求传递信息的时候，get请求使用的是param，而post请求使用的是data。（惨痛的教训）
二，axios的封装
这里先大致的说一下
//导入axios
import axios from 'axios';
//配置axios，并且定义request承接、、这里是我一开始使用request，之后尽量不要使用request
const request = axios.create({
baseURL:'http://localhost:3000'
})
//axios请求拦截器
request.interceptors.request.use(config =>{
return config
})
//axiso响应拦截器
request.interceptors.response.use(config =>{
return config
})
export default request
封装完成之后大致就是这么一个效果
而在vue中，往往在src下简历一个文件夹util，创建request.js文件进行编写，当然是个人习惯。
三，拦截器
分为两类：请求拦截器和响应拦截器
作用：主要用于我们在网络请求的时候在发起请求或者响应时的 操作进行响应处理。
例如：添加网页加载的动画。使用token认证的时候。响应的时候进行相应的数据处理
咱就说的在难听一些吧，这玩意在vue中用还得先封装ajax随后再使用。所以我把这个放到第三章来了，第二章先学习一下再vue中的封装吧。
如上一部分的代码所示，config指的就是这个响应本身。
例如，我的前端保存了token，我想利用每次发送请求进行token的检验，那么往往是将token放置到请求头里带给后端，而在发送请求之前我们需要将token放到请求头中，这时候请求拦截器就能够发挥作用
这里以我写的为例子
request.interceptors.request.use(function(config){
const token = window.sessionStorage.getItem('token')
if(token == null){
return config
}else{
config.headers.Authorization = 'Bearer ' + sessionStorage.getItem('token');
return config
}
})
响应拦截器就一样了，暂时不做演示。
四，个人心的体会
有个框架往往是很轻松的，如果使用原生的httpxmlrequest发送亲求几位收起请求太麻烦了，而jquery的使用往往是操作dom，发送请求只是一项功能，fetch的主要功能是处理回调地狱，所以axios是一个专一处理请求的框架，这是这份专一让人选择他。
但是后面听说大厂都用fetch发送请求，不知是真是假。（估计是上古代码，那个时候还没有axios，fetch确实是那是很好的选择之一）
浙公网安备 33010602011771号