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),我们还执行了一些额外的操作,如跳转到登录页面或提示用户。


相关文章
|
13小时前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
5 0
|
4天前
|
前端开发 开发工具 git
大事件项目15----axios响应拦截器,统一判断401做被动退出
大事件项目15----axios响应拦截器,统一判断401做被动退出
|
4天前
|
前端开发 开发工具 数据安全/隐私保护
大事件项目13----axios请求拦截器,统一携带token
大事件项目13----axios请求拦截器,统一携带token
|
2月前
|
JavaScript
axios拦截器:每次请求自动带上 token
axios拦截器:每次请求自动带上 token
23 0
|
2月前
|
前端开发 JavaScript 数据格式
vue3中axios添加请求和响应的拦截器
vue3中axios添加请求和响应的拦截器
25 1
|
2月前
|
JavaScript API
Vue中axios拦截器怎么使用
Vue中axios拦截器怎么使用
|
2月前
axios拦截器
axios拦截器
16 0
|
2月前
【Axios】配置默认值及拦截器代码逐行详解
【Axios】配置默认值及拦截器代码逐行详解
48 0
|
2月前
|
资源调度 JavaScript API
vue封装axios请求接口并添加前置拦截器和响应拦截器
vue封装axios请求接口并添加前置拦截器和响应拦截器
59 0