vue中请求接口怎么封装公共地址_vue请求接口的封装
import api from './api';
import request from'./request';//获取url上的rest参数,返回参数列表 /{userId}/{roleId} => ['userId', 'roleId']
functiongetUrlParams(url) {return (url.match(/\{(\w+)\}/g) || []).map(param => /\{(\w+)\}/.exec(param)[1]);
}/** 创建一个请求函数
* 闭包,用于保存isProcessing变量
* 通过isProcessing控制接口不发生多次请求
**/
function createRequest(url, method = 'post') {
let isProcessing= false;
let timeOut= true;
const urlParams= getUrlParams(url); //获取url上的rest参数 用于后续处理
//encryResquest 控制参数是否集体加密
//encryResponse 控制回参是否需要解密
return function (data, callback, config = {}, force = false) {//force 传true跳过不同时多次请求限制
if (isProcessing && !force) return;
isProcessing= true;
let headerIn={
headers:{}
}if(sessionStorage.getItem("userTk"))headerIn.headers.Authorization = sessionStorage.getItem("userTk")
config=Object.assign(headerIn,config)
console.info("工程头部",config)
let option=Object.assign({
url: url,
method: method,
}, config);//处理rest参数, 把url上的{param}替换,并且把data对应的key删掉,防止引起可能的400错误
urlParams.forEach(param =>{
option.url=option.url.replace(`{${param}}`, data[param]);
Reflect.deleteProperty(data, param);
});if (method === 'post') option.data =data;if (method === 'get') option.params =data;
request(option)
.then(res=>{
console.info("终极参数",res)
isProcessing= false;var goLogin = false;if(res.data.statusCode === "403"){
goLogin= true}else{var resList = res.data.toString().split('statusCode=')if(resList.length>1){var tiplist = resList[1].split(', ')var code = tiplist.length>0?tiplist[0]:''
if(code === '403'){
goLogin= true}
}
}if(goLogin){
alert("超时登录,请重新登录")
setTimeout(()=>{
location.href="/"},500)return;
}
callback(res.data,res.headers);
})
.catch(err =>{
isProcessing= false;if(err.response) {
const code=err.response.status;if(timeOut && code === 401){
timeOut= falsealert("超时登录,请重新登录")
setTimeout(()=>{
timeOut= truelocation.href="/"},500)return;
}
callback({statusCode: code, message: `服务出错了:${code},请稍后再试!`});
}else{
console.info(err)
console.error('回调中代码逻辑出问题了!', err);
}
});
}
}
let service={};
Object.keys(api).forEach(module=>{
let moduleReq= service[module] ={};
Object.keys(api[module]).forEach(name=>{
const apiConfig=api[module][name];//获取url 是一个string时默认使用post请求,是一个对象时,通过对象的method来调用对象的url
if (typeof apiConfig === 'string') {
moduleReq[name]=createRequest(apiConfig);
}else{
moduleReq[name]=createRequest(apiConfig.url, apiConfig.method);
}
});
});
exportdefault service;
vue中请求接口怎么封装公共地址_vue请求接口的封装相关推荐
- vue中使用腾讯地图选择地址
腾讯地图选择地址引发的一系列问题 2019/12/14更新 修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址 新的文章链接:vue中使用腾讯地图选择地址(二) ...
- Vue中使用axios的响应拦截器处理请求失败的情况(处理token过期问题)以及 登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
- vue中使用echarts实现动态数据绑定、获取后端接口数据
之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...
- vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) ...
- vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...
1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...
- vue中获取到的为什么图片地址会自动拼接上localhost:8080_前端骨架屏自动生成方案(很实用!收藏)...
来源:花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏? 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示 ...
- vue中使用require动态获取图片地址
项目场景: 项目中根据图片不同的后缀名,展示不同的图片 问题描述 直接给图片的src绑定图片地址,图片不显示,使用 require('图片本地路径' + '地址变量' + '.png') 也不显示 & ...
- Vue生命周期,Vue中在哪个生命周期阶段调用异步请求最佳
Vue生命周期 beforeCreate(创建前): 在数据观测和初始化事件还未开始,data.watcher.methods都还不存在,但是$route已存在,可以根据路由信息进行重定向等操作. c ...
- 010——VUE中使用lodash库减少watch对后台请求的压力
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>使用 ...
最新文章
- 前端开发学习常用网站网址及介绍(都是免费的)
- 8.11. Migrating MySQL Data into Elasticsearch using logstash
- 成为DBA的艰辛之路————需要掌握一笔不小的知识
- javascript数组常用方法
- linux隐藏tomcat版本_Ubuntu 14.04隐藏Tomcat-7.0.52的版本号与操作系统类型
- sqlserver文件转mysql_怎样将Sqlserver数据库转成mysql数据库
- mysql5.7安装教程绿色_mysql 5.7.17 安装配置方法图文教程(windows)
- STM8单片机低功耗---活跃停机(Active Halt)模式实现-1
- Java笔记(二十一) 动态代理
- OSX下解决PIL的IOError: decoder jpeg not available 问题
- 腾讯、百度、滴滴最新NLP算法面经
- 人工智能数学基础之线性代数(持续更新)
- Xcode 工程文件打开不出来, cannot be opened because the project file cannot be parsed.
- 图书管理系统项目总结
- 通过matlab语言来实现对硬币的计数问题
- linux安装gt620驱动下载,Debian6安装Nvidia GT 620显卡驱动
- 导致计算机重启的原因,电脑自动重启的原因分析
- 通过图片获取地理位置
- 如何自动发送生日提醒和祝福
- qcloud.login 登录失败,可能是网络错误或者服务器发生异常的多种解决方法
热门文章
- oc 协议 回调 静态成员_每日一问:c++类的成员函数,能作为线程的参数吗?
- win10禁用驱动程序强制签名_图文细说 win10系统未检测到第三个监视器的途径 -win10使用教程...
- 荣耀6plus+android5.1,荣耀66Plus EMUI3.0开发版5.5.1版本发布说明
- java下标运算符_《Java从小白到大牛精简版》之第6章 运算符(下)
- python 用while输出数字金字塔_用Python实现一个Dual Thrust数字货币量化交易策略
- 手机怎么进ph_明日发布,华为鸿蒙OS2.0手机版特色功能曝光
- android 打印机蜂鸣器,CANON喷墨打印机 蜂鸣器响5声不打印的问题解决办法
- classcastexception异常_优雅的异常处理
- ModuleNotFoundError: No module named ‘apt_pkg‘
- 网管型工业以太网交换机的几种管理方式