vue 项目api 封装 + 全局拦截处理 + 全局参数处理 + 处理ie缓存

本文介绍了一个Vue项目中如何进行API封装,包括设置axios的基础配置、处理IE缓存、添加全局请求和响应拦截器以进行错误处理及重定向。同时,通过示例展示了如何根据请求类型创建不同HTTP方法的便捷接口。
摘要由CSDN通过智能技术生成

import axios from 'axios';
import qs from 'qs';
import Vue from 'vue';
import Element from 'element-ui';
import stroage from '~/plugins/utils/localstroage';
Vue.use(Element);
// let baseURL = ;
// if (process.server) {
// baseURL =
http://${process.env.HOST || ‘localhost’}:${process.env.PORT || 3000}` + ‘/api’;
// }
var instance = axios.create({
baseURL: ‘/api’,
timeout: 20000,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
// ‘Access-Control-Allow-Origin’: ‘*’
}
});

instance.baseURL = ‘/api’;

let goLogin = (data) => {
// let router = new Router();
// router.push({name: ‘login’});
var loginType = localStorage.getItem(‘loginType’);
setTimeout(() => {
if (loginType === ‘admin’) {
location.href = ‘/adminLogin’;
}
if (loginType === ‘index’) {
location.href = ‘/’;
}
}, 10000);
Vue.prototype.$alert(data.msg, ‘错误’, {
showConfirmButton: true,
confirmButtonText: ‘重新登录’,
callback: action => {
if (loginType === ‘admin’) {
setTimeout(location.href = ‘/adminLogin’, 1000);
}
if (loginType === ‘index’) {
setTimeout(location.href = ‘/’, 1000);
}
}
});
};
// 添加一个请求拦截器
instance.interceptors.request.use(function (config) {
// Do something before request is sent
// 处理ie缓存 + 全局参数
if (config.params) {
config.params.years = stroage.getStore(‘JDtime’);
config.params.T = new Date().getTime();
} else {
config.params = {‘years’: stroage.getStore(‘JDtime’), ‘T’: new Date().getTime()};
}
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});

// 添加一个响应拦截器
//全局拦截处理
instance.interceptors.response.use(function (res) {
if (res.data && res.data.status === 401) {
goLogin(res.data);
}

if (res && res.data && res.data.status !== 200) {
// console.log(e.data);
res.data.data = {
};
}
return res;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});

let api = {};

api.request = function () {
var isPost = arguments[0];
var method = arguments[1];
var url = arguments[2];
var data = arguments[3];
var config = {
method,
url,
responseType: ‘json’
};
config[isPost ? ‘data’ : ‘params’] = isPost ? qs.stringify(data) : data;
return new Promise(function (resolve, reject) {
instance.request(config).then(result => {
resolve(result.data);
}).catch(result => {
reject(result.response.data);
});
});
};

let likeGet = [‘delete’, ‘get’, ‘head’, ‘options’];

let likePost = [‘post’, ‘put’, ‘patch’];
likeGet.forEach(method => {
api[method] = function () {
return api.request(false, method, …arguments);
};
});

likePost.forEach(method => {
api[method] = function () {
return api.request(true, method, …arguments);
};
});

export default api;
`

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晴天有点孤单

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值