vue axios封装及API统一管理 vue axios封装及API统一管理的方法（vue响应式原理）

import axios from 'axios'
import { Loading, Message } from 'element-ui'
import router from '../router/index.js'
let loading
function startLoading() {
 loading = Loading.service({
  lock: true,
  text: '加载中....',
  background: 'rgba(0, 0, 0, 0.7)'
 })
}
function endLoading() {
 loading.close()
}
// 请求拦截
axios.interceptors.request.use(
 (confing) => {
  startLoading()
  //设置请求头
  if (localStorage.eToken) {
   confing.headers.Authorization = localStorage.eToken
  }
  return confing
 },
 (error) => {
  return Promise.reject(error)
 }
)
//响应拦截
axios.interceptors.response.use(
 (response) => {
  endLoading()
  return response
 },
 (error) => {
  Message.error(error.response.data)
  endLoading()
  // 获取状态码
  const { status } = error.response
  if (status === 401) {
   Message.error('请重新登录')
    //清楚token
   localStorage.removeItem('eToken')
    //跳转到登录页面
   router.push('/login')
  }
  return Promise.reject(error)
 }
)
export default axios

//域名统一管理

const base = {
 url: 'http://localhost:5001/api'
}
export default base

import axios from '../untils/http'
import QS from 'qs'
import base from './base'
/**
 * post方法，对应post请求
 * @desc注册请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function userRejister(data) {
 return axios({
  url: `${base.url}/users/register`,
  method: 'post',
  data: QS.stringify(data)
 })
}
/**
 * get方法，对应get请求
 * @desc登录请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function userInfo() {
 return axios({
  url: `${base.url}/profile/all`,
  method: 'get'
 })
}

async submitForm(formName) {
  this.$refs[formName].validate(valid => {
  if (valid) {
   //发送请求return new Promise((resolve, reject) => {
   userRejister(this.registerUser)
    .then(response => {
    console.log(response);
    resolve();
    })
    .catch(error => {
    reject(error);
    });
   });
  } else {
   console.log("error submit!!");
   return false;
  }
  });
 },