封装axios （elememt-ui）

因为使用了element-ui的Message组件，所以

这里有单独使用它作为接口调用的前端错误提示：

https://element.eleme.cn/#/zh-CN/component/message#dan-du-yin-yong

Message.typetype 有默认的info，和success，waring和error

创建文件@/request/axios.js

import axios from 'axios'
import { Message } from 'element-ui'
const api = {}
let  apiBaseURL ="";
if(process.env.NODE_ENV==="development"){
 apiBaseURL ="";  //这填写测试API
}else if(process.env.NODE_ENV==="production"){
 apiBaseURL ="";     //这填写生产API
}
let instance = axios.create({
  timeout: 5000,
  baseURL: apiBaseURL,
  validateStatus(status) {
    switch (status) {
      case 400:
        Message.error('请求出错')
        break
      case 401:
        Message.warning({
          message: '授权失败，请重新登录'
        })
        // store.commit('LOGIN_OUT')
        setTimeout(() => {
          window.location.reload()
        }, 1000)
        return
      case 403:
        Message.warning({
          message: '拒绝访问'
        })
        break
      case 404:
        Message.warning({
          message: '请求错误,未找到该资源'
        })
        break
      case 500:
        Message.warning({
          message: '服务端错误'
        })
        break
    }
    return status >= 200 && status < 300
  }
})
instance.defaults.headers.post['Content-Type'] = 'application/json';
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 请求头添加token
    // if (store.state.UserToken) {
    //  config.headers.accessToken = '2332D4444594F45EE7E6370794CB4483';
    // }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)
// 响应拦截器即异常处理
instance.interceptors.response.use(
  response => {
    return response.data
  },
  err => {
    if (err && err.response) {
    } else {
      err.message = '连接服务器失败'
    }
    return Promise.reject(err.response)
  }
)
api.get = function (url) {
  return new Promise((resolve, reject) => {
    instance
      .get(url)
      .then(response => {
        if (response.code === 200) {
          resolve(response.data)
        } else {
          reject(response.msg)
        }
      })
      .catch(e => {
        console.log(e)
      })
  })
}
api.post = function (url, data) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, data)
      .then(response => {
        if (response.code == 200) {
          resolve(response.data)
        } else {
          Message.error(response.msg);
          reject(response.msg)
        }
      })
      .catch(err => {
           console.log('错误：'+err)
      })
  })
}
export default api

创建@/request/api.js

import api from '@/request/axios.js'
export const getDataList(参数)=>api.get('接口地址?&'+参数=参数值);

全局挂载(可选)

/* main.js 文件 */
import api from '@/request/axios.js'
Vue.prototype.$api = api

使用

方式一

如果使用了全局挂载方式，则在vue组件内:

async getData() {
  let data = await this.$api.getDataList();
  this.dataList = data;
},

方式二

如果没有全局挂载：

//在组件内
import {getDataList} from "@/request/api.js"

async getData() {
  let data = await getDataList();
  this.dataList = data;
},