Vue中的axios通用配置

首先配置通用设置

import QS from 'qs'
import Axios from 'axios'
import {SERVER} from '@/Config/config'

// 默认请求地址
Axios.defaults.baseURL = SERVER
// 超时时间
Axios.defaults.timeout = 5000

接着 配置拦截器

let load = null
// 发送
Axios.interceptors.request.use(config => {
  // 配置token
  if (store.getters.token) {
    config.headers['x-requested-key'] = `ZXWL${getToken()}`
  }
// 配置content-Type
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
  // elementUI的loading
  load = Loading.service({ fullscreen: true })
  return config
}, error => {
  return Promise.reject(error)
})

// 接收
Axios.interceptors.response.use(config => {
  // 关闭loading
  load.close()
  return config
}, error => {
  return Promise.reject(error)
})

最后去配置get方法和post方法

// get方法
export const getService = (url = '', params = {}) => {
  return new Promise((resolve,reject) => {
    Axios.get(url,{param}).then(res => {
      const {data} = res;
      resolve(res);
    }).catch(err => {
      reject(err)
    })
  })
}

// post方法  这里就需要使用qs库来序列化表单
export const postService = (url = '', param = {}) => {
  return new Promise((resolve,reject) => {
    Axios.post(url,QS.stringify(param)).then(res => {
      const {data} = res;
      resolve(data);
    }).catch(err => {
      reject(err)
    })
  })
}

最后 挂载到Vue对象上
再main.js中：

import {getService, postService} from '@/utils/url.js'

// 挂载请求方法
Vue.prototype.$http = {
  POST: postService,
  GET: getService
}

大功告成