axios拦截器的使用?

简介: axios拦截器的使用?

Axios 拦截器是一种强大的功能,允许你在请求被发送到服务器之前,或者服务器响应被送到应用之前,对其进行“拦截”和修改。这在你需要统一处理请求和响应,或者在请求发送前添加一些公共信息(如认证令牌)时非常有用。


Axios 提供了两种类型的拦截器:请求拦截器和响应拦截器。


请求拦截器


请求拦截器会在请求被发送到服务器之前被调用。你可以在这里修改请求的配置,例如添加请求头、设置超时时间等。


下面是一个使用请求拦截器的示例:


axios.interceptors.request.use(function (config) {  
    // 在发送请求之前做些什么  
    // 例如,添加请求头  
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');  
    return config;  
  }, function (error) {  
    // 对请求错误做些什么  
    return Promise.reject(error);  
  });

在这个例子中,我们为所有请求添加了一个名为 Authorization 的请求头,其值为从 localStorage 中获取的 token。如果请求出现错误,我们直接返回一个被拒绝的 Promise。


响应拦截器


响应拦截器会在服务器响应被送到应用之前被调用。你可以在这里对响应数据进行一些处理,或者在响应错误时执行一些操作。


下面是一个使用响应拦截器的示例:


axios.interceptors.response.use(function (response) {  
    // 对响应数据做点什么  
    // 例如,如果服务器返回的状态码为 200,则直接返回响应数据  
    if (response.status === 200) {  
      return response.data;  
    } else {  
      // 如果状态码不是 200,则抛出错误  
      return Promise.reject(response.data);  
    }  
  }, function (error) {  
    // 对响应错误做点什么  
    if (error.response.status) {  
      // 如果服务器返回了状态码,则根据状态码处理错误  
      switch (error.response.status) {  
        case 401:  
          // 未授权,跳转到登录页面  
          router.push('/login');  
          break;  
        case 403:  
          // 禁止访问,提示用户  
          alert('你没有权限访问该页面');  
          break;  
        default:  
          // 其他错误,提示用户  
          alert('请求出错');  
      }  
      return Promise.reject(error.response);  
    }  
  });


在这个例子中,我们检查服务器返回的状态码。如果状态码为 200,我们直接返回响应数据;否则,我们返回一个被拒绝的 Promise,并在控制台中打印错误信息。如果服务器返回了错误的状态码(如 401 或 403),我们还执行了一些额外的操作,如跳转到登录页面或提示用户。


相关文章
|
6月前
axios拦截器
axios拦截器
32 0
|
JavaScript 前端开发
axios拦截器的使用?
axios拦截器的使用?
|
1月前
|
缓存 JavaScript 搜索推荐
|
21天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
57 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编码
218 0
|
6月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
166 1
|
6月前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
139 0

热门文章

最新文章

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