基于axios和element-ui封装的请求

import axios from 'axios'
import { Loading, MessageBox } from 'element-ui'
import { baseURL } from '@/config/rootPath'  // 请求根路径

export default class Request{
  constructor () {
    this.interceptorsRequest()
    this.interceptorsResponse()
  }

  /**
   * 请求拦截器
   * */
  interceptorsRequest () {
    axios.interceptors.request.use(config => {
      if (config.showLoading && !this.loading) {
        this.loading = Loading.service({
          text: '正在加载中...',
          spinner: 'el-icon-loading'
        })
      }
      return config
    }, (error) => {
      return Promise.reject(error)
    })
  }

  /**
   * 响应拦截器
   * */
  interceptorsResponse () {
    axios.interceptors.response.use(response => {
      const { data } = response
      return data
    }, (error) => {
      return Promise.reject(error)
    })
  }

  /**
   * 公共网络请求
   * @param {string} url 请求头路径
   * @param {string} method 请求类型、默认post
   * @param {object} header 请求头、默认{}
   * @param {object} data 请求参数、默认{}
   * @param {number} timeout 请求超时时间、默认10000ms
   * @param {boolean} showLoading 是否显示加载动画、默认true
   * */
  ajax ({
    url,
    method = 'post',
    header = {}, 
    data = {},
    timeout = 10000,
    showLoading = true
  }) {
    return new Promise((resolve, reject) => {
      axios({
        header: this.getHeader(header),
        baseURL,
        url,
        method,
        data,
        timeout,
        showLoading
      }).then(result => {
        this.dealStatusCode({
          result,
          url,
          resolve,
          reject
        })
      }).catch(error => {
        const { response = {} } = error
        const { status } = response
        this.dealError({
          status,
          url,
          reject
        })
      }).finally(() => {
        this.loading && this.loading.close()
      })
    })
  }

  /**
   * 合并请求头
   * @param {object} header //请求头
   * */
  getHeader (header) {
    const defaultHeader = {}
    header = header.constructor === Object ? header : {}
    return Object.assign(defaultHeader, header)
  }

  /**
   * 处理请求错误信息
   * @param {string|number} status 错误信息
   * @param {string} url 请求地址
   * @param {function} reject 失败回掉函数
   * @param {string} msg 错误信息
   * */
  dealError ({ status, url, reject, msg = '请求异常！' }) {
    if (!this.messageBox) {
      this.messageBox = MessageBox.alert(
        `状态码：${status}<br/>
         错误提示：${msg}<br/>
         请求地址：${url}`,
        '服务器异常',
        {
          dangerouslyUseHTMLString: true,
          showClose: false,
          confirmButtonText: '知道了',
          type: 'error'
        }).then(() => {
        reject(status)
      })
    }
  }

  /**
   * 处理后台服务器返回状态码(注：可以根据自己公司返回的状态码进行修改)
   * @param {object} result 请求结果
   * @param {string} url 请求地址
   * @param {function} resolve 成功回掉函数
   * @param {function} reject 失败回掉函数
   * */
  dealStatusCode ({ result, url, resolve, reject }) {
    let { state, msg, data } = result
    msg = msg || '后台未返回错误信息！'
    switch (state) {
      case 'SUCCESS':
        resolve(data)
        break
      case 'ERROR':
        this.dealError({
          status: state,
          url,
          reject,
          msg
        })
        break
      case 'NOLOGIN':
        location.href = '/login'
        break
      default: // do something
    }
  }
}

// 用法
const request = new Request()
request.ajax({
  url: 'url'
}).then(data => {
  console.log(data) // 请求结果
}).catch(status => {
  console.log(status) // 错误状态码
})