axios里面可以设置拦截器 ，可以在我们正式请求发送之前做一些事情
拦截器分请求拦截器和响应拦截器
首先我们看下请求拦截器的写法
image.png
下面我们看下需求 实现代码
image.png
我们在前后端交互时 经常会使用到token 首次请求后台把token返回给前端 前端把这个token可以保存到localstorage里 然后每次请求后端都需要带上这个token 进行鉴权验证
如果我们每次请求都在路径后面加上http://abc.com/list?token=xxxx 这种形式
如果请求特别多的话 每次都在后面写上token=xxx这种太麻烦
这时候就可以用拦截器来使token自动增加
下面看下代码
在写代码之前我在后端php页面中添加了一行代码
输出当前请求路径到requestlog这个文件里面
image.png
然后还是以上节我们讲的最新新闻和最热新闻为例子
拦截器动态添加token代码如下
image.png
运行结果
image.png
看下requestlog文件里输出的请求路径
image.png
可以看见为我们拼接了token参数
而且如果有多个参数还会为我们生成token=xx&hot=xx的格式
当然这只是对于将参数写在params里面的情况 会帮助自动处理请求参数路径
如果是直接在请求路径后面直接加上参数
如下面
image.png
则会生成如下路径
image.png
可以发现第二个请求参数并没有给自动处理成&符号的形式
所以用axios发送get请求时 有参数最好写在params里面 （因为会对参数自动做处理）
那么如何设置拦截器 才能使直接在请求路径后面拼接参数的形式也能进行自动参数转化呢
下面看下代码
image.png
运行结果
image.png
以上就是axios的拦截器简单使用 可以给我们的请求url上动态的添加token参数
还可以设置每个url请求的基准路径等
网友评论