axios最最基础的用法

axios闲来无事

ajax请求库，比较热门

目录 axios闲来无事一，axios的理解和使用二，axios的封装三，拦截器四，个人心的体会

一，axios的理解和使用

服了，看弹幕给我看的没自信了。

axios最基本的使用方式

axios的基本使用

GET方法
POST方法
DELETE方法
PUT方法

{
"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确实是那是很好的选择之一）