添加vite.config.ts简化axios,添加请求跟路径和超时时长

This commit is contained in:
zhangyiming 2020-11-18 18:58:04 +08:00
parent cc6157e12b
commit 3cc8a1f3fe
5 changed files with 35 additions and 33 deletions

View File

@ -4,11 +4,13 @@ import { excludeProps } from "./utils";
*
*/
export const defaultConfig: AxiosRequestConfig = {
baseURL: '/api',
timeout: 10000, //10秒超时
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
}
},
};
export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {

View File

@ -22,7 +22,7 @@ class EnclosureHttp {
private static initConfig: EnclosureHttpRequestConfig = {};
// 保存当前Axios实例对象
private static axiosInstance: AxiosInstance;
private static axiosInstance: AxiosInstance = Axios.create(genConfig());
// 保存 EnclosureHttp实例
private static EnclosureHttpInstance: EnclosureHttp;
@ -153,6 +153,7 @@ class EnclosureHttp {
const instance = EnclosureHttp.axiosInstance;
instance.interceptors.response.use(
(response: EnclosureHttpResoponse) => {
// 请求每次成功一次就删除当前canceltoken标记
const cancelKey = this.genUniqueKey(response.config);
this.deleteCancelTokenByCancelKey(cancelKey);
@ -191,26 +192,11 @@ class EnclosureHttp {
);
}
/**
* @description
* @returns EnclosureHttp实例
*/
static getInstance(): EnclosureHttp {
if (!this.EnclosureHttpInstance) {
this.axiosInstance = Axios.create(this.initConfig);
this.EnclosureHttpInstance = new EnclosureHttp();
this.EnclosureHttpInstance.httpInterceptorsRequest();
this.EnclosureHttpInstance.httpInterceptorsResponse();
}
return this.EnclosureHttpInstance;
}
// eslint-disable-next-line class-methods-use-this
public request<T>(
method: RequestMethods,
url: string,
param?: AxiosRequestConfig,
axiosConfig?: EnclosureHttpRequestConfig
axiosConfig?: EnclosureHttpRequestConfig,
): Promise<T> {
const config = transformConfigByMethod(param, {
method,
@ -226,8 +212,7 @@ class EnclosureHttp {
}
return new Promise((resolve, reject) => {
Axios
.request(config)
EnclosureHttp.axiosInstance.request(config)
.then((response: EnclosureHttpResoponse) => {
resolve(response.data);
})
@ -252,16 +237,7 @@ class EnclosureHttp {
): Promise<T> {
return this.request<T>("get", url, params, config);
}
/**
*
* @description
* @param config axios配置
* @returns void 0
*/
static install(config?: EnclosureHttpRequestConfig): void {
this.initConfig = genConfig(config);
}
}
export default EnclosureHttp;

View File

@ -45,6 +45,4 @@ export default class EnclosureHttp {
params?: T,
config?: EnclosureHttpRequestConfig
): Promise<T>
static install(config?: EnclosureHttpRequestConfig): void
static getInstance(): EnclosureHttp
}

View File

@ -6,7 +6,7 @@
import { ref, onMounted, nextTick } from "vue"
export default {
mounted() {
this.$http.request("get", "https://api.github.com/users")
this.$http.request("get", "/getApi")
},
setup() {
const text = ref("vue-ts")

26
vite.config.ts Normal file
View File

@ -0,0 +1,26 @@
module.exports = {
alias: {},
// 是否自动在浏览器打开
open: false,
// 是否开启 https
https: false,
// 服务端渲染
ssr: false,
/**
* Base public path when served in production.
* @default '/'
*/
/**
* Directory relative from `root` where build output will be placed. If the
* directory exists, it will be removed before the build.
* @default 'dist'
*/
// 反向代理
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}