vue axios请求拦截 响应

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios'
import qs from 'qs'
import { Message } from 'element-ui'

// 环境的切换
if (process.env.NODE_ENV == 'development') { 
  axios.defaults.baseURL = '';
 } else if (process.env.NODE_ENV == 'debug') { 
  axios.defaults.baseURL = '';
 } else if (process.env.NODE_ENV == 'production') { 
  axios.defaults.baseURL = '';
 }

 // 请求超时时间
axios.defaults.timeout = 10000
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
// 请求拦截器
axios.interceptors.request.use(
  config => {
    const access_token = localStorage.getItem('access_token')
    access_token && (config.headers.access_token = access_token)
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 响应拦截器
axios.interceptors.response.use(
  (res) => {
    if (res.status === 200) {
      return Promise.resolve(res)
    } else {
      return Promise.reject(res)
    }
  },
  error => {
    // 服务器状态码不是200的情况
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          Message.error('未登录')
          toLogin()
          break
        case 403:
          Message.warning('登录过期,请重新登录')
          localStorage.removeItem('access_token')
          setTimeout(() => {
            toLogin()
          }, 1000)
          break
        case 404:
            Message.error('网络请求不存在')
          break
        default: 
          Message.error(error.response.data.msg)
      }
      return Promise.reject(error.response)
    }
  }
)

/** 
 * 跳转登录页
 * 携带当前页面路由,以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
  router.replace({
    path: '/login',
    query: { redirect: router.currentRoute.fullPath }
  })
}
export function get(url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url+'?access_token='+localStorage.getItem('access_token'), {
      params: params
    }).then(res => {
      if (res.data.code == 0) {
        resolve(res.data)
      } else {
        Message.error(res.data.msg)
      }
    }).catch(err => {
      reject(err.data)
    })
  })
}

export function post(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url+'?access_token='+localStorage.getItem('access_token'), qs.stringify(params)).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

你可能感兴趣的:(vue axios请求拦截 响应)