当前位置:   article > 正文

Vue+Node项目前端怎么拦截请求和响应_nodejs 请求头拦截器

nodejs 请求头拦截器

在使用Axios时,我们可以通过拦截器(interceptor)来对请求和响应进行拦截处理。Axios提供了interceptors属性来设置拦截器,它包含两个属性:request和response。

  1. 拦截请求:

当一个请求被发起时,我们可以在请求被发送之前拦截它,添加一些请求头或请求参数等。我们可以这样来实现它:

  1. // 添加请求拦截器
  2. axios.interceptors.request.use(function(config) {
  3. // 在发送请求之前做些什么
  4. config.headers.Authorization = localStorage.token;
  5. return config;
  6. }, function(error) {
  7. // 对请求错误做些什么
  8. return Promise.reject(error);
  9. });

上述代码中,我们通过axios.interceptors.request.use方法来设置请求拦截器。在请求被发送之前,我们给config.headers添加了一个Authorization头部,这样就可以在请求中携带token

  1. 拦截响应:

当响应返回后,我们可以在调用thencatch之前,对响应进行拦截处理。我们可以这样来实现它:

  1. // 添加响应拦截器
  2. axios.interceptors.response.use(function(response) {
  3. // 对响应数据做点什么
  4. if(response.status == 200){
  5. return Promise.resolve(response.data);
  6. }else{
  7. return Promise.reject(response);
  8. }
  9. }, function(error) {
  10. // 对响应错误做点什么
  11. return Promise.reject(error);
  12. });

上述代码中,我们通过axios.interceptors.response.use方法来设置响应拦截器。在响应被处理之前,我们对响应的状态码进行检查。如果响应状态码为200,我们就通过Promise.resolve方法返回响应数据,否则就通过Promise.reject方法直接返回响应对象。

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号