一、vue项目的前期配置

下载axios ，并且在main.js中导入axios

npm i axios -S
//main.js
import axios from "axios"

二、封装axios实例 —request.js

在项目src目录下新建utils文件夹，然后在里面新建request.js文件

//导入axios
import axios from 'axios'
//使用element-ui Message做消息提醒
import { MessageBox, Message } from 'element-ui'
//使用vuex管理Token
import store from '@/store'
//获取Token和移除Token的方法
import { getToken, removeToken } from '@/utils/auth'

//1.创建新的axios 实例
const service = axios.create({
  //公共接口（线下地址、测试地址、线上地址）
  baseURL: process.env.VUE_APP_BASE_API,
  //超时时间，单位是ms
  timeout: 10000 
})

//2.请求拦截器
service.interceptors.request.use(
  config => {
    //判断Token是否为true
    if (store.getters.token) {
      //配置请求头
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

//3.响应拦截器
service.interceptors.response.use(
 //使用Promise进行处理和响应
  response => {
    const res = response.data
    if (res.statusCode != 200) {
      //配置服务器返回的状态码及返回的提示信息
      if (res.statusCode == 400) {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(new Error(res.message || '重复添加，无法进行操作'))
      }
      if (res.statusCode == 403) {
        // 重新登录
        MessageBox.confirm('登录已失效，是否重新登录', '重新登录', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //vuex重置路由
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || '登录已失效，无法进行操作'))
    }else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

//4.导入文件
export default service

三、封装请求—http.js

//http.js
//导入封装好的axios实例
import request from './request'

const http = {

    //Get请求 
    get(url,params){
        const config={
            method :'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    
	//POST请求
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },

	//删除
    delete(url,params){
        const config = {
          method: 'get',
          url: url
        }
      if (params) config.params = params
      return request(config)
    },
  
  //修改
  update(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  
  //查询
  search(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  }
}
//导出
export default http

四、正式封装API,用于发送请求—api.js

在项目src 目录下新建api文件夹，然后在其中新建api.js文件，这个文件是主要书写api封装过程

import http from '@/utils/http'
//新增分组
export function addGroup(params){
    // return http.post('请求服务器的接口',前端传过来的数据)
    return http.post('/sys-user/add-group',params)
}
//修改分组
export function updateGroupList(params){
    return http.post('/sys-user/update-group',params)
}
//删除分组
export function delGroupList(params){
    return http.delete('/sys-user/del-group/' + params.groupId)
}
//查询分组
export function getAllGroupList(){
  return http.search('sys-user/get-all-group-list')
}

五、在vue文件中调用请求

//导入接口
import { addGroup, updateGroupList } from '@/api/accountAPI/addGroups'
//引用接口（增删改查）
 addGroup(this.adddGroupsParm).then((response) => {
    console.log(response)
     if (response.statusCode == 200) {
       this.$message({
         type: 'success',
         message: '添加成功'
       })
     }
   }).catch((error) => {
     console.log(error)
   })
const groupId = row.groupId
delGroupList({ groupId }).then((response) => {
    if ((response.statusCode = 200)) {
        this.$message({
          type: 'success',
          message: '此分组删除成功!'
        });
        this.fetchData();
      } else {
        this.$message.error('此分组删除失败')
      }
    });
 updateGroupList(this.adddGroupsParm).then((response) => {
    console.log(response)
     if (response.statusCode == 200) {
       this.$message({
         type: 'success',
         message: '修改成功'
       })
     }
   }).catch((error) => {
     console.log(error)
   })
 addGroupList(this.reqParm).then((response) => {
     this.list = response.data.pageData
     this.reqParm.total = response.data.pageCount
     this.listLoading = false
   })

附（配置文件）：

①. 新建.env.development文件，配置生成环境的地址

# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = 'http://***************:5002/api'

②. 新建.env.production文件，配置生成环境的地址

# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'http://***************:5001/api'

持续更新中