vue+element+axios做一个简单的拦截处理

废话不多说直接上代码，都有注释相信每个人都能看懂

 

import axios from 'axios'
/**1、将对象序列化，多个对象之间用&拼接（拼接是由底层处理，无需手动操作） */
/**2、将序列化的内容拆分成一个个单一的对象 */
import qs from 'qs'
/**引入element全局提示和加载样式 */
import { Message, Loading } from 'element-ui'

/**加载样式 */
let loading

/**创建axios实例 */
const service = axios.create({
  /**api的base_url */
  baseURL: process.env.BASE_URL,
  /**请求超时时间 */
  timeout: 5000
})

/**request拦截器==>对请求参数做处理 */
service.interceptors.request.use(
  config => {
    loading = Loading.service({
      lock: true,
      text: '加载中……',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    /**序列化参数 */
    config.method === 'post'
      ? (config.data = qs.stringify({ ...config.data }))
      : (config.params = { ...config.params })

    /**带上请求头或者token在这里处理 */
    config.headers['Content-Type'] = 'application/json; charset=utf-8'

    return config
  },
  /**请求错误处理 */
  error => {
    Message({
      message: error,
      type: 'error'
    })
    Promise.reject(error)
  }
)

/**respone拦截器==>对响应做处理 */
service.interceptors.response.use(
  response => {
    loading.close()
    /**请求成功处理 */
    if (response.data) {
   
      Message({
        message: '加载成功',
        type: 'sucess'
      })
       /**这里根据后端提供的数据进行对应的处理 */
      return response.data
    } else {
      Message({
        message: response.data.message,
        type: 'error'
      })
    }
  },
  /**响应错误处理 */
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '请求错误'
          break
        case 401:
          error.message = '未授权，请登录'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = `请求地址出错: ${error.response.config.url}`
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器内部错误'
          break
        case 501:
          error.message = '服务未实现'
          break
        case 502:
          error.message = '网关错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网关超时'
          break
        case 505:
          error.message = 'HTTP版本不受支持'
          break
        default:
          break
      }
    }
    Message({
      message: error.message,
      type: 'error'
    })
    return Promise.reject(error)
  }
)

/**抛出在main里全局使用 */
export default service