1：下载依赖axios

npm install axios -s

2：在utils文件夹目录中创建文件request.js

3： 打开request文件引入axios和Message组件

import axios from 'axios';
import store from '@/store';
import { getToken } from '@/utils/auth';
import { Message } from 'element-ui';

4：创建axios实例

const service = axios.create({
  baseURL: 'http://www.qingmu.com/api', //自行修改
  withCredentials: true,
  timeout: 5000
});

5：请求拦截器，里面逻辑自行处理，我是每次请求接口，请求头携带token用户信息

service.interceptors.request.use(
  config => {
    config.headers['token'] = getToken() || 0;
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

6：详情拦截器以及服务器异常code处理

service.interceptors.response.use(

  response => {
    const res = response.data;
    // 未设置状态码则默认成功状态
    const code = res.errCode || 0;
    // if the custom code is not 20000, it is judged as an error.
    if (code !== 0) {
      if (code === 3001 || code === 3002) {
        Message({
          message: res.errMsg,
          type: 'error',
          duration: 5 * 1000
        });
      } else {
        // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
        if (code === 1004 || code === 1005 || code === 1006) {
          // to re-login
          store.dispatch('user/resetToken').then(() => {
            location.reload();
          });
        } else {
          Message({
            message: res.errMsg || 'Error',
            type: 'error',
            duration: 5 * 1000
          });
        }
      }
      return Promise.reject(new Error(res.errMsg || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 302:error.message = '接口重定向了！'; break;
        case 400:error.message = '请求错误'; break;
        case 401:error.message = '未授权，请登录'; break;
        case 403:error.message = '拒绝访问'; break;
        case 404:error.message = `请求地址出错: ${error.response.config.url}`; break;
        case 408:error.message = '请求超时'; break;
        case 409:error.message = '系统已存在相同数据！'; break;
        case 500:error.message = '服务器内部错误'; break;
        case 501:error.message = '服务未实现'; break;
        case 502:error.message = '网关错误'; break;
        case 503:error.message = '服务不可用'; break;
        case 504:error.message = '网关超时'; break;
        case 505:error.message = 'HTTP版本不受支持'; break;
        default:error.message = '异常问题，请联系管理员！'; break;
      }
    }
    Message({
      message: error || 'Error',
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

7：把service整个模块导出

export default service;

8：开始使用：创建user.js文件维护接口信息

import request from '@/utils/request';


// 列表
export function showUser(data) {
  return request({
    url: '/user/queryUser',
    method: 'post',
    data: data
  });
}

// 人员新增弹框
export function queryaddProduct(data) {
  return request({
    url: '/user/queryProduct',
    method: 'get',
    params: data
  });
}

// 删除
export function delUser(id) {
  return request({
    url: `/user/delUserById?uid=${id}`,
    method: 'post'
  });
}
// 更新状态
export function updateUser(data) {
  return request({
    url: 'user/updateState',
    method: 'post',
    data: data
  });
}

// 模糊查询
export function searchName(id) {
  return request({
    url: `/user/username/search?usernameQuery=${id}`,
    method: 'get'

  });
}

// 批量删除
export function batchDeleteUser(data) {
  return request({
    url: '/user/delUserByIds',
    method: 'post',
    data: data
  });
}

export function addUser(data) {
  return request({
    url: '/user/add',
    method: 'POST',
    data: data
  });
}


// 登录
export function login(data) {
  return request({
    url: '/userinfo/login',
    method: 'post',
    data
  });
}
export function getRouters() {
  return request({
    url: '/menuInfo/router',
    method: 'get'
  });
}

9：在vue文件中开始使用

9-1：引入需要使用的接口

import { showUser } from '@/api/user';

9-2：掉接口

 // 获取列表
    async getList() {
      this.listLoading = true;
      const res = await showUser(this.listQuery);
      if (!res) {
        return;
      }
      const data = res.data || {};
      this.list = data.data || [];
      this.total = data.totalCount;
      this.listLoading = false;
    },

request.js完整代码贴出

import axios from 'axios';
import { Message } from 'element-ui';
import store from '@/store';
import { getToken } from '@/utils/auth';
import config from '@/api/config';



// 创建axios实例
const service = axios.create({
  baseURL: 'http://www.qingmu.com/api',
  withCredentials: true,
  timeout: 5000
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    config.headers['token'] = getToken() || 0;
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(

  response => {
    const res = response.data;
    // 未设置状态码则默认成功状态
    const code = res.errCode || 0;
    // if the custom code is not 20000, it is judged as an error.
    if (code !== 0) {
      if (code === 3001 || code === 3002) {
        Message({
          message: res.errMsg,
          type: 'error',
          duration: 5 * 1000
        });
      } else {
        // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
        if (code === 1004 || code === 1005 || code === 1006) {
          // to re-login
          store.dispatch('user/resetToken').then(() => {
            location.reload();
          });
        } else {
          Message({
            message: res.errMsg || 'Error',
            type: 'error',
            duration: 5 * 1000
          });
        }
      }
      return Promise.reject(new Error(res.errMsg || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    if (error && error.response) {
      switch (error.response.status) {
        case 302:error.message = '接口重定向了！'; break;
        case 400:error.message = '请求错误'; break;
        case 401:error.message = '未授权，请登录'; break;
        case 403:error.message = '拒绝访问'; break;
        case 404:error.message = `请求地址出错: ${error.response.config.url}`; break;
        case 408:error.message = '请求超时'; break;
        case 409:error.message = '系统已存在相同数据！'; break;
        case 500:error.message = '服务器内部错误'; break;
        case 501:error.message = '服务未实现'; break;
        case 502:error.message = '网关错误'; break;
        case 503:error.message = '服务不可用'; break;
        case 504:error.message = '网关超时'; break;
        case 505:error.message = 'HTTP版本不受支持'; break;
        default:error.message = '异常问题，请联系管理员！'; break;
      }
    }
    Message({
      message: error || 'Error',
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;