vue+typescript封装axios,实现取消重复请求
vue-cli3可以直接生成vue+typescript项目,然后对axios进行封装,实现拦截多次重复请求,并取消。直接撸代码(也是借鉴网上的,做了修改)在根目录下新建axios.tool.ts文件import Vue from 'vue';import router from './router';import axios from 'axios';import qs from...
·
vue-cli3可以直接生成vue+typescript项目,然后对axios进行封装,实现拦截多次重复请求,并取消。
直接撸代码(也是借鉴网上的,做了修改)
- 在根目录下新建axios.tool.ts文件
import Vue from 'vue';
import router from './router';
import axios from 'axios';
import qs from 'qs';
import { Base } from './base'; // 导入全局环境变量
const base = new Base();
// 取消请求
const CancelToken = axios.CancelToken;
// 是否需要拦截code==-1的状态
let is_log: boolean = false;
// 设置默认请求头
axios.defaults.headers = {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded',
};
axios.defaults.baseURL = base.url();
// 请求超时的时间限制
axios.defaults.timeout = 20000;
// 开始设置请求 发起的拦截处理
// config 代表发起请求的参数的实体
let requestName: any;
axios.interceptors.request.use((config: any) => {
// 得到参数中的 requestName 字段,用于决定下次发起请求,取消对应的 相同字段的请求
// 如果没有 requestName 就默认添加一个 不同的时间戳
if (config.method === 'post') {
if (config.data && qs.parse(config.data).requestName) {
requestName = qs.parse(config.data).requestName;
} else {
requestName = new Date().getTime();
}
if (config.data.indexOf('is_log') !== -1) {
is_log = true;
}
} else {
if (config.params && config.params.requestName) {
requestName = config.params.requestName;
} else {
requestName = new Date().getTime();
}
if (config.params.is_log) {
is_log = true;
}
}
// 判断,如果这里拿到的参数中的 requestName 在上一次请求中已经存在,就取消上一次的请求
if (requestName) {
if (axios[requestName] && axios[requestName].cancel) {
axios[requestName].cancel('取消了请求');
}
config.cancelToken = new CancelToken( (c: any) => {
axios[requestName] = {};
axios[requestName].cancel = c;
});
}
return config;
}, (error: any) => {
return Promise.reject(error);
});
// 请求到结果的拦截处理
axios.interceptors.response.use( (config: any) => {
// 返回请求正确的结果
if ((!is_log) && config.data.code === -1) {
router.push({path: '/login'}); // 进入登陆页面
}
if (config.data.code === -2) {
router.push({path: '/'}); // 进入实名认证
}
return config.data;
}, (error: any) => {
return Promise.reject(error);
// 错误的请求结果处理,这里的代码根据后台的状态码来决定错误的输出信息
});
// 将axios 的 post 方法,绑定到 vue 实例上面的 $post
Vue.prototype.$post = (url: any, params: any) => {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(params)).then((res: any) => {
resolve(res);
}).catch((err: any) => {
reject(err);
});
});
};
// 将axios 的 get 方法,绑定到 vue 实例上面的 $get
Vue.prototype.$get = (url: any, params: any) => {
return new Promise((resolve, reject) => {
axios.get(url, { params: params }).then((res: any) => {
resolve(res); // 返回请求成功的数据 data
}).catch((err: any) => {
reject(err);
});
});
};
- 在shims-vue.d.ts中声明qs模块,因为axios中没有qs的ts文件暴露
declare module 'qs' {
const qs: any;
export default qs;
}
- 在main.ts中引入
import './axios.tool'; // 导入封装好的axios
- 在vue组件中使用
this.$get("/userMessageAssociation/isRead", { is_log: true , requestName: 'get'}).then( (res: any) => {
console.log(res);
});
更多推荐
已为社区贡献12条内容
所有评论(0)