首页 > 编程知识 正文

axios拦截器使用教程,axios拦截器

时间:2023-05-05 04:20:38 阅读:240387 作者:3018

axios拦截器

axios提供了拦截器,用于拦截请求报文和响应报文,并对其做一定操作
有request拦截器和response拦截器。

1、request拦截器

request拦截器在发出请求前拦截请求,可以对请求进行修改并返回。通常可以修改url地址,携带的数据,请求方式等。

比如下面这个例子,用拦截器修改数据格式

//请求拦截 /user/login axios.interceptors.request.use(config => { if (config.method == 'post' && config.url !== '/user/login') { //表单数据 config.data = qs.stringify(config.data); } //返回请求配置 return config; }, error => { return Promise.reject(error); }); // post请求 表单数据 /user/login json axios.post('http://127.0.0.1:8099/user/login', { username: 'admin1', password: '123321' }); axios.post('http://127.0.0.1:8099/user/login1', { username: 'admin1', password: '123321' }); 2、response拦截器

response拦截器用于接受到响应报文之后对响应报文做修改再返回,一般就用于修改响应报文中的数据

比如下面这个例子

axios.interceptors.response.use(response => { console.log(response, '--------res') let res = { //解析响应报文 ...response, test: '123', data: response.data.data, status: response.data.status, statusText: response.data.message } return res; }, error => { return Promise.reject(error); }); axios.get('http://127.0.0.1:8099/manager/category/findAllCategory').then((res) => { console.log(res, '响应数据') });

以上就是拦截器的基本使用,简单整理了一下,做个笔记

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。