npm install axios(或在index.html引入axios文件)

在src目录下新建api文件夹，将http请求相关文件统一管理

1.axios.js

import axios from 'axios'

class httpRequest {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      timeout: 20000, // 超时时间 可自定义其他配置
      headers: {
        // 'token': token
      }
    }
    return config
  }
  interceptors (instance) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      // 这里可以自定义一些config 配置
      let { data } = config
      return data
    }, error => {
      // 请求错误处理
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      const { data, status } = res
      return { data, status }
    }, error => {
      let info = {}
      let { status, statusText, data } = error.response
      if (!error.response) {
        info = {
          code: 5000,
          msg: 'Network Error'
        }
      } else {
        // 此处整理错误信息格式
        info = {
          code: status,
          data: data,
          msg: statusText
        }
      }
      return Promise.reject(info)
    })
  }
  request () {
    let instance = axios.create()
    let options = Object.assign(this.getInsideConfig())
    this.interceptors(instance)
    return instance(options)
  }
}
export default httpRequest

2.api.request.js

import HttpRequest from './axios'

const baseUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:8088' : 'http://api.com'
const axios = new HttpRequest(baseUrl)
export default axios

3.api.js

import httpserver from './api.request'

let httpConfig = {
  getLogin: (params) => {
    return httpserver.request({
      url: '',
      method: 'get',
      params: params
    })
  },
  getUser: (params) => {
    return httpserver.request({
      url: '',
      method: 'post',
      data: params
    })
  }
}

export default httpConfig

4.为了避免繁琐的import相关的api，最后在mian.js注册一个http全局函数

import httpConfig from './api/api' // 全局http请求

Vue.prototype.$http = httpConfig // 注册全局http请求