请求拦截器和响应拦截器

请求拦截器

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

 

 

 代码：

// 请求超时时间
axios.defaults.timeout = 120000

// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 判断是否存在token，如果存在将每个页面header都添加token
    if (window.sessionStorage.getItem('DT')) {
      // 请求头配置全局token
      config.headers.DT = window.sessionStorage.getItem('DT')
    }
    return config
  },
  err => {
    // 对请求错误做些什么
    Vue.prototype.$message.error('请求超时')
    return Promise.reject(err)
  }
)

 

响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器。

 

 

 

 代码：

 

// 响应拦截器
axios.interceptors.response.use(
  response => {
    // res是响应的结果
    switch (response.data.code) {
      case 401:
        // 登录失效
        // 响应成功的拦截
        console.log('响应拦截器：')
        // console.log(response.data)
        Vue.prototype.$message.error(response.data.message)
        sessionStorage.removeItem('DT')
        router.push('/login')
        break
      case 404:
        if (response.data.message !== null) {
          Vue.prototype.$message.error(response.data.message)
        } else {
          Vue.prototype.$message.error('未知错误')
        }
        break
      case 500:
        // 错误
        if (response.data.message !== null) {
          Vue.prototype.$message.error(response.data.message)
        } else {
          Vue.prototype.$message.error('未知错误')
        }
        break
      default:
        return response
    }
    return response
  },
  err => {
    if (err.response.data.message) {
      Vue.prototype.$message.error(err.response.data.message)
      return Promise.reject(err.response.data.message) // 返回接口返回的错误信息
    } else {
      // 返回状态码不为200时候的错误处理
      Vue.prototype.$message.error(err.toString())
      return Promise.resolve(err)
    }
  }
)

页面中请求接口时：

 

 

代码：

// 用户登录提交
    login() {
      // debugger
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        if (valid) {const userInfo = {
            username: this.loginForm.username,
            password: this.loginForm.password
          }
          // 登录之前去除token
          window.sessionStorage.removeItem('DT')
          const { data: res } = await this.$http.post('/system/login', userInfo)
          if (res.code !== 200) {
            this.initCaptcha()
            return
          }
          this.$message.success('登录成功')
          window.sessionStorage.setItem('DT', res.result.token)
          this.$router.push('/main')
        }
      })
    }