基于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) // 错误状态码
})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355