用户登录

在 axios 发送请求之前,还有收到响应以后,我们可以设置一些拦截器。可以拦截请求还有响应,也就是你可以在这些拦截器里提前处理一下 axios 发送的请求,还有收到的响应。

下面我们一块儿了解一下怎么配置使用拦截器,打开 app.service ,先在这里配置一个请求拦截器,用一下 axios 上面提供的 interceptors,配置请求拦截器,继续使用 request 这个方法,添加拦截器用的是 use。我们需要给这个 use 提供两个回调参数。

一个是正常请求的时候用的回调,这里这个回调支持一个 config 参数,它的值就是 axios 用的请求的配置。在这个回调里要返回这个 config。 在上面可以在控制台上输出这个一行文字,axios 请求拦截器,后面加上 config 这个参数的值。

下面可以再配置一个请求的时候出问题的时候用的回调,接收一个 error 参数,在这个回调里返回 Promise.reject ,把 error 交给这个方法。

回到浏览器,观察一下浏览器的控制台,现在 axios 发送请求的时候会被我们配置的请求拦截器拦截,这里要做的事情就是输出这行文字,后面是axios 用的请求配置。

再回到 app.service ,继续在这里再配置一个 响应拦截器,用一下 axios.interceptors 配置一个 response 拦截器,用一下 use 这个方法。

提供两个回调,一个是成功得到响应的时候用的回调,回调接收一个 response 参数,先返回这个 response ,然后在上面可以在控制台上输出一行文字,axios 响应拦截器,后面再加上请求得到的 response 。

下面需要再添加一个回调,这个回调支持一个 error 参数,在这个回调里 return 的是 Promise.reject 把 error 交给这个方法。

然后回到浏览器,再预览一下。现在用 axios 发送请求得到了响应的时候,会被我们配置的响应拦截器拦截,在这个拦截器,正常得到了响应的时候要做的事情就是在控制台上输出 axios 响应拦截器,后面是得到的响应。

axios 的请求与响应的拦截器(Interceptors)《 Vue.js 前端应用 #9:请求接口 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点