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);
}
Vue项目中的接口进阶使用的更多相关文章
- 在webpack搭建的vue项目中如何管理好后台接口地址
在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- vue 项目中,定时器(setInterval)的写法
vue 项目中,定时器(setInterval)的写法: fetchJobList是一个方法,里面有dispatch一个action进行请求接口的代码. data () { return { inte ...
- 在vue项目中的axios使用配置记录
默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...
- Vue项目中遇到的一些问题总结
一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...
- Vue项目中的http请求统一管理
module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...
随机推荐
- 单页应用SPA开发最佳实践
最近用vue+vue-router做了个单页应用的项目,页面大概有15个左右.积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践 全站的颜色定义放在一个less或者scss ...
- javascript入门教程(二):变量
大家好,我从今天开始就会正式讲javascript的语法方面.变量 js中的变量一般使用var来声明(es6的let不在本教程讨论范围内),可以用来定义任何种类的变量,如果只对变量进行了定义而没有赋值 ...
- H5 视频播放解决方案
前两天,美团推出的杨洋H5火爆朋友圈.里面主要的是多段视频播放.暂停.听起来很简单,但是由于腾讯白名单限制,在微信浏览器,qq浏览器,会自动将video标签中非腾讯域名的视频 ,自动全屏,结尾追加视频 ...
- Html5 Canvas学习之路(五)
Canvas 图像(上) Canvas 图像API可以加载图像数据,然后直接将图像应用到画布上.还可以裁切.拼贴图像数据,以显示用户需要的部分.此外,Canvas还提供了像素数据的存储功能,这样就能对 ...
- prometheus之查询语言
PromQL(Prometheus Query Language)是 Prometheus 自己开发的表达式语言,语言表现力很丰富,内置函数也很多.使用它可以对时序数据进行筛选和聚合. 一.PromQ ...
- 判断链表是否有环(Java实现)
判断给定的链表中是否有环.如果有环则返回true,否则返回false. 解题思路:设置两个指针,slow和fast,fast每次走两步,slow每次走一步,如果有环的话fast一定会追上slow,判断 ...
- 世界各国 MCC 和 MNC 列表
http://www.cnblogs.com/inteliot/archive/2012/08/22/2651666.html常见MCC:代码(MCC) ISO 3166-1 国家202 ...
- 人机交互BS
B/S结构用户界面设计 [实验编号] 10003809548j Web界面设计 [实验学时] 8学时 [实验环境] l 所需硬件环境为微机: l 所需软件环境为dreamweaver ...
- 如何规避容器内做Java堆dump导致容器崩溃的问题
写在前边 最近公司生产环境的容器云上出了个性能问题,为了做性能分析,使用 JDK 自带的 jmap 收集堆dump,出现了内存溢出导致了容器崩溃. 本篇文章将带你探究,如何规避容器内做堆 dump 导 ...
- BI系统打包Docker镜像及容器化部署的具体实现
在过去的几年中,"云"作为明星热词站在了各种新潮技术之中,你可能使用过,但说不清它的原理:或者是没用过,但听过它的大名:也可能连它的名字都没听过,但你对这只蓝色鲸鱼一定十分眼熟.作 ...