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请求接口的封装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科大讯飞智能办公本X3发布 售价4999
- 下一篇： 迪士尼新片《小美人鱼》今日上线国内视频平