axios基础(五):axios拦截器

简介: axios基础(五):axios拦截器

请求拦截器与响应拦截器的概念

  • 请求拦截器:相当于一种请求检测机制,只有通过该检测的请求才能被发送。
  • 响应拦截器:相当于一种响应检测机制,只有通过该检测的响应才能被返回。

请求拦截器有什么作用?

  • 请求拦截器可以给请求添加参数

image.png

拦截器的执行顺序是什么?

  • 请求拦截器是谁在定义的最后,谁先拦截,相应拦截器则是谁先定义谁先拦截。

image.png

模板代码

// 设置请求拦截器
axios.interceptors.request.use(function (config) {
    console.log("请求拦截器 拦截成功 1号");
    config.params = {a: 666666};    
    return config;
    // throw new Error;
}, function (error) {
    console.log("请求拦截器 拦截失败 1号");
    return Promise.reject(error);
});
axios.interceptors.request.use(function (config) {
    console.log("请求拦截器 拦截成功 2号");
    return config;
    // throw new Error;
}, function (error) {
    console.log("请求拦截器 拦截失败 2号");
    return Promise.reject(error);
});
// 设置响应拦截器
axios.interceptors.response.use(function (response) {
    console.log("响应拦截器 成功 1号");
    // console.log(response);
    return response.data;
}, function (error) {
    console.log("响应拦截器 default 1号");
    return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
    console.log("响应拦截器 成功 2号");
    return response;
}, function (error) {
    console.log("响应拦截器 default 2号");
    return Promise.reject(error);
});
// 使用axios发送请求
axios({
    method: 'GET',
    url: 'http://localhost:3000/posts'
}).then((response => {console.log(response)})).catch(reason => {console.log("自定义回调错误");});
相关文章
|
6月前
axios拦截器
axios拦截器
33 0
|
JavaScript 前端开发
axios拦截器的使用?
axios拦截器的使用?
|
1月前
|
缓存 JavaScript 搜索推荐
|
28天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
75 4
|
5月前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
5月前
|
前端开发 开发工具 git
大事件项目15----axios响应拦截器,统一判断401做被动退出
大事件项目15----axios响应拦截器,统一判断401做被动退出
|
4月前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
229 0
|
6月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
168 1
|
6月前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
145 0
|
6月前
|
前端开发
axios拦截器的使用?
axios拦截器的使用?
46 0

热门文章

最新文章

  • 1
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    116
  • 2
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    39
  • 3
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    44
  • 4
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    83
  • 5
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    112
  • 6
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    42
  • 7
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    27
  • 8
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    44
  • 9
    前后端数据交互之axios的路径怎样找?axios的路径是那个,是你打开Tomcat之后,出现的路径+你项目写的接口路径
    34
  • 10
    数据交互,前后端数据请求,axios请求,对象结构的使用,E6的使用,结构赋值是什么?函数形参的obj如何,函数形参的obj就改成对象结构接收传入的数据对象
    24