Vue项目中的接口进阶使用

创建services文件夹

1.文件夹apis、index、request的三个文件。

2.apis文件放接口

export const apis = {
  checkDeviceNo: '/api/client/getEquipmentCode',//检查设备码是否存在
  getSystemInfo: '/api/client/system/info',//登录二维码
  heartbeat: '/api/client/heartbeat',//心跳检测
  login: '/api/client/login',//轮询登录状态
  getUserInfo: '/api/client/user/info',//玩家信息
  getGameInfo: '/api/client/game/info',//游戏配置
  uploadReport: '/api/client/scores',//上报成绩
  out: '/api/client/logout',//退出登录
  replace: '/api/client/replace',//更换设备码（免重登）
  getAdList: '/api/screen/getList',//轮播资源
  update: '/api/client/getResource',//资源更新
  iniUpdate: '/api/client/getConfiguration',//配置更新
  competitionInfo: '/api/client/game/competitionInfo',//赛事信息
  competitionServerInfo: '/api/client/game/competitionServerInfo',//赛事服务器信息
  serverInfo: '/api/client/game/serverInfo'//联机服务器信息
}

　　index文件作为入口文件

import { get, post, put, del } from './request';
import { apis } from './apis';

export {
  get, post, put, del,
  apis
}

　　request文件作为请求头、添加请求拦截、添加响应拦截器。

import axios from 'axios';
import { ipcRenderer } from 'electron';

function baseUrl() {
  //正式: https://03simulation.lynkco.com/api
  //测试：https://jinqing.zyozl.com/api
  return process.env.NODE_ENV === 'development' ? '/test' : 'https://jinqing.zyozl.com/api';
}
// 创建 axios 实例
let service = axios;

service.defaults.timeout = 60000;
// service.defaults.baseURL = baseUrl;
service.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
//允许携带cookiewithCredentials的情况下，后端要设置Access-Control-Allow-Origin为你的源地址，
//例如http://localhost:8080，不能是*，而且还要设置header(‘Access-Control-Allow-Credentials: true’),
service.defaults.withCredentials = true;
// 添加请求拦截器
service.interceptors.request.use(
  config => {
    if (config.method === 'post' || config.method === 'put') {
      if (config.data.token) {
        config.headers.token = config.data.token;
      }
      delete config.data.token;
    } else {
      if (config.params.token) {
        config.headers.token = config.params.token;
      }
      delete config.params.token;
    }
    if (config.method === 'post' || config.method === 'put') {
      // post、put 提交时，将对象转换为string, 为处理Java后台解析问题
      config.data = JSON.stringify(config.data);
    }
    // 请求发送前进行处理
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    if (response.data.code === 0 || response.data.code === 10054) {
      let { data } = response;
      return data;
    } else {
      switch (response.data.code) {
        // case 10020:
        // case 10021:
        // case 401:
        //   ipcRenderer.send('appReload');
        //   ipcRenderer.send('notification', '登录过期，请重新登录');
        //   return;
        default:
          if (response.data.msg) {
            ipcRenderer.send('notification', response.data.msg);
          }
          let { data } = response;
          return data;
      }
    }
  },
  (error) => {
    let info = {};
    if (!error.response) {
      info = {
        code: 500,
        msg: 'Network Error'
      };
      ipcRenderer.send('notification', 'Network Error');
      return;
    } else {
      ipcRenderer.send('notification', `${error.response.statusText} code:${error.response.status}`);
      return;
    }
  }
);
/**
 * 创建统一封装过的 axios 实例
 * @return {AxiosInstance}
 */
export function get(url, params, headers) {
  let options = {};
  if (params) {
    options.params = params;
  }
  if (headers) {
    options.headers = headers;
  }
  return service.get(baseUrl()+url, options);
}

export function post(url, data, headers) {
  let options = {};
  if (headers) {
    options.headers = headers;
  }
  return service.post(baseUrl()+url, data, options);
}

export function put(url, data, headers) {
  let options = {};
  if (headers) {
    options.headers = headers;
  }
  return service.put(baseUrl()+url, data, options);
}

export function del(url, params, headers) {
  let options = {};
  if (params) {
    options.params = params;
  }
  if (headers) {
    options.headers = headers;
  }
  return service.delete(baseUrl()+url, options);
}