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请求接口的封装相关推荐

  1. vue中使用腾讯地图选择地址

    腾讯地图选择地址引发的一系列问题 2019/12/14更新 修复了自治区/直辖市无法选择的bug(比如上海之类的城市) 采用更加友好的方式来选择地址 新的文章链接:vue中使用腾讯地图选择地址(二) ...

  2. Vue中使用axios的响应拦截器处理请求失败的情况(处理token过期问题)以及 登录成功跳转回原来页面问题

    参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...

  3. vue中使用echarts实现动态数据绑定、获取后端接口数据

    之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单 ...

  4. vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式

    前言 相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换 使用动态组件,相信大家都能看懂(部分代码省略) ...

  5. vue中请求接口怎么封装公共地址_如何修改Vue打包后文件的接口地址配置(转自网络)...

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是 ...

  6. vue中获取到的为什么图片地址会自动拼接上localhost:8080_前端骨架屏自动生成方案(很实用!收藏)...

    来源:花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏? 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示 ...

  7. vue中使用require动态获取图片地址

    项目场景: 项目中根据图片不同的后缀名,展示不同的图片 问题描述 直接给图片的src绑定图片地址,图片不显示,使用 require('图片本地路径' + '地址变量' + '.png') 也不显示 & ...

  8. Vue生命周期,Vue中在哪个生命周期阶段调用异步请求最佳

    Vue生命周期 beforeCreate(创建前): 在数据观测和初始化事件还未开始,data.watcher.methods都还不存在,但是$route已存在,可以根据路由信息进行重定向等操作. c ...

  9. 010——VUE中使用lodash库减少watch对后台请求的压力

    <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>使用 ...

最新文章

  1. 前端开发学习常用网站网址及介绍(都是免费的)
  2. 8.11. Migrating MySQL Data into Elasticsearch using logstash
  3. 成为DBA的艰辛之路————需要掌握一笔不小的知识
  4. javascript数组常用方法
  5. linux隐藏tomcat版本_Ubuntu 14.04隐藏Tomcat-7.0.52的版本号与操作系统类型
  6. sqlserver文件转mysql_怎样将Sqlserver数据库转成mysql数据库
  7. mysql5.7安装教程绿色_mysql 5.7.17 安装配置方法图文教程(windows)
  8. STM8单片机低功耗---活跃停机(Active Halt)模式实现-1
  9. Java笔记(二十一) 动态代理
  10. OSX下解决PIL的IOError: decoder jpeg not available 问题
  11. 腾讯、百度、滴滴最新NLP算法面经
  12. 人工智能数学基础之线性代数(持续更新)
  13. Xcode 工程文件打开不出来, cannot be opened because the project file cannot be parsed.
  14. 图书管理系统项目总结
  15. 通过matlab语言来实现对硬币的计数问题
  16. linux安装gt620驱动下载,Debian6安装Nvidia GT 620显卡驱动
  17. 导致计算机重启的原因,电脑自动重启的原因分析
  18. 通过图片获取地理位置
  19. 如何自动发送生日提醒和祝福
  20. qcloud.login 登录失败,可能是网络错误或者服务器发生异常的多种解决方法

热门文章

  1. oc 协议 回调 静态成员_每日一问:c++类的成员函数,能作为线程的参数吗?
  2. win10禁用驱动程序强制签名_图文细说 win10系统未检测到第三个监视器的途径 -win10使用教程...
  3. 荣耀6plus+android5.1,荣耀66Plus EMUI3.0开发版5.5.1版本发布说明
  4. java下标运算符_《Java从小白到大牛精简版》之第6章 运算符(下)
  5. python 用while输出数字金字塔_用Python实现一个Dual Thrust数字货币量化交易策略
  6. 手机怎么进ph_明日发布,华为鸿蒙OS2.0手机版特色功能曝光
  7. android 打印机蜂鸣器,CANON喷墨打印机 蜂鸣器响5声不打印的问题解决办法
  8. classcastexception异常_优雅的异常处理
  9. ModuleNotFoundError: No module named ‘apt_pkg‘
  10. 网管型工业以太网交换机的几种管理方式