axios拦截器

我们在做一些项目的时候都会有一个登陆页面和很多的详情的页面,包括我们现在看到的很多的页面也是一样的,但是,如果说我们在还没有登录的时候,详情等其他的页面就开始报出重大的错误,那么我们肯定不能够展现给我们的用户看,因为一旦有报错,我们的一些功能一些页面都是报红根本就看不了,所以当报错的时候我们还是返回登录页面并且给用户提示,这个时候我们就用到了我们的axios拦截器.axios拦截器能够更好的帮我们处理这个问题,axios拦截器在任何的框架中也是很受欢迎的所以我们在那个框架中都可以进行使用只是我们存放的文件位置不一样,我们先说一下进行安装axios的命令:npm install axios --save   这个命令不管是react,还是Vue都可以使用,我们先看一下react的文件结构:

我们的文件结构就是这样,vue的也可以这样放,我们下面来看一下代码:

 

import axios from 'axios'

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = ''


// http request 拦截器
axios.interceptors.request.use(
  config => {
    // config.headers.Authorization = `token ${store.state.token}`

    return config
  },
  err => {
    return Promise.reject(err)
  },
)

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {

    if (error.response) {
      switch (error.response.status) {
        case 404:
          // 404 清除token信息并跳转到登录页面
          localStorage.removeItem('mobile');
          
          // window.location.href='/login'
        
      }
    }
    // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
    return Promise.reject(error.response.data)
  },
)

export default axios

 

我们的axios拦截器的代码就是如上所诉的,我们在请求一些网络数据的时候就会有很长的地址这个axios.defaults.baseURL就可以更好的帮我们解决,我们将网络请求的地址的相同部分放到这里,然后我们在请求的时候就会很轻松,不需要写那么长了.

如果我的这篇文章为正在观看的你带来了帮助并且您非常喜欢这篇文章,请给我一个关注和一个喜欢(赞),谢谢!!!