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;