安装相关模块

cnpm i axios babel-polyfill qs -S

import 'babel-polyfill' // 入口文件顶部引入

axios请求封装

import axios from 'axios'
import qs from 'qs'
import Message from 'iview/src/components/message'
import LoadingBar from 'iview/src/components/loading-bar'
import Modal from 'iview/src/components/modal'
import router from '@/router'

// 请求时的拦截器
axios.interceptors.request.use(config => {
  LoadingBar.start()
  if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
    config.data = qs.stringify(config.data)
  }
  return config
}, error => {
  return Promise.reject(error)
})

// 请求完成后的拦截器
axios.interceptors.response.use(response => {
  LoadingBar.finish()
  if (response.data.result === NOT_LOGIN) {
    localStorage.removeItem('userInfo')
    Modal.info({
      title: '消息',
      content: '登录已失效，请重新登录',
      okText: '我知道了',
      onOk() {
        router.push({
          path: '/login',
          query: { redirect: router.currentRoute.fullPath }
        })
      }
    })
  } else {
    return response.data
  }
}, error => {
  LoadingBar.error()
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '400 错误请求'
        break
      case 401:
        error.message = '401 未授权，请重新登录'
        break
      case 403:
        error.message = '403 拒绝访问'
        break
      case 404:
        error.message = '404 请求错误，未找到该资源'
        break
      case 405:
        error.message = '405 请求方法未允许'
        break
      case 408:
        error.message = '408 请求超时'
        break
      case 415:
        error.message = '415 请求头 Content-Type 有误'
        break
      case 500:
        error.message = '500 服务器端出错'
        break
      case 501:
        error.message = '501 尚未实施，服务器不具备完成请求的功能'
        break
      case 502:
        error.message = '502 网关错误'
        break
      case 503:
        error.message = '503 服务不可用'
        break
      case 504:
        error.message = '504 网关超时'
        break
      case 505:
        error.message = '505 http版本不支持该请求'
        break
      default:
        error.message = `请求 API 失败, code ${error.response.status}`
    }
  } else {
    error.message = '连接到服务器失败或被重定向'
  }
  return Promise.reject(error.message)
})

const RES_OK = 1
const NOT_LOGIN = -1
const rootPath = ''
const xhr = ({ method = 'get', url, params = null, type = 'application/x-www-form-urlencoded' }) => {
  return new Promise((resolve, reject) => {
    if (method === 'get') {
      axios.get(rootPath + url, {
        params: params
      }).then(res => {
        if (res.result === RES_OK) {
          resolve(res.data)
        } else {
          Message.warning(res.desc)
        }
      }).catch(e => {
        Message.warning(e)
      })
    } else if (method === 'post') {
      axios.post(rootPath + url, params, {
        headers: {
          'Content-Type': type
        }
      }).then(res => {
        if (res.result === RES_OK) {
          resolve(res.data)
        } else {
          Message.warning(res.desc)
        }
      }).catch(e => {
        Message.warning(e)
      })
    } else if (method === 'put') {
      axios.put(rootPath + url, params, {
        headers: {
          'Content-Type': type
        }
      }).then(res => {
        if (res.result === RES_OK) {
          resolve(res.data)
        } else {
          Message.warning(res.desc)
        }
      }).catch(e => {
        Message.warning(e)
      })
    } else if (method === 'delete') {
      axios.delete(rootPath + url, {
        params: params
      }).then(res => {
        if (res.result === RES_OK) {
          resolve(res.data)
        } else {
          Message.warning(res.desc)
        }
      }).catch(e => {
        Message.warning(e)
      })
    } else {
      //
    }
  })
}

export default xhr

• axios拦截器可根据需求自定义更丰富的功能，此处是增加了查看请求完成情况的进度条及一些状态判断等。
• res返回的code，data，msg，result等参数需要与后台开发人员商议确定写法，此处是统一使用的result, data, desc写法。

调用代码

import xhr from './xhr/axios'

class AccountService {
  // 登录
  login(data) {
    return xhr({
      method: 'post',
      type: 'application/json',
      url: '/api/account/login',
      params: data
    })
  }

  // 登出
  logout(data) {
    return xhr({
      method: 'get',
      url: '/api/account/logout',
      params: data
    })
  }
}

// 实例化后导出，全局单例
export default new AccountService()

• 接口方法为post和put时，根据后端需求，type可设置为application/json等，不传默认为application/x-www-form-urlencoded

页面调用

import AccountService from '@/services/accountService'

AccountService.login(this.loginForm).then(data => {
})