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请求接口的封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。