添加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 = { export const defaultConfig: AxiosRequestConfig = {
baseURL: '/api',
timeout: 10000, //10秒超时
headers: { headers: {
Accept: "application/json, text/plain, */*", Accept: "application/json, text/plain, */*",
"Content-Type": "application/json", "Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest" "X-Requested-With": "XMLHttpRequest"
} },
}; };
export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig { export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {

View File

@ -22,7 +22,7 @@ class EnclosureHttp {
private static initConfig: EnclosureHttpRequestConfig = {}; private static initConfig: EnclosureHttpRequestConfig = {};
// 保存当前Axios实例对象 // 保存当前Axios实例对象
private static axiosInstance: AxiosInstance; private static axiosInstance: AxiosInstance = Axios.create(genConfig());
// 保存 EnclosureHttp实例 // 保存 EnclosureHttp实例
private static EnclosureHttpInstance: EnclosureHttp; private static EnclosureHttpInstance: EnclosureHttp;
@ -153,6 +153,7 @@ class EnclosureHttp {
const instance = EnclosureHttp.axiosInstance; const instance = EnclosureHttp.axiosInstance;
instance.interceptors.response.use( instance.interceptors.response.use(
(response: EnclosureHttpResoponse) => { (response: EnclosureHttpResoponse) => {
// 请求每次成功一次就删除当前canceltoken标记 // 请求每次成功一次就删除当前canceltoken标记
const cancelKey = this.genUniqueKey(response.config); const cancelKey = this.genUniqueKey(response.config);
this.deleteCancelTokenByCancelKey(cancelKey); 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>( public request<T>(
method: RequestMethods, method: RequestMethods,
url: string, url: string,
param?: AxiosRequestConfig, param?: AxiosRequestConfig,
axiosConfig?: EnclosureHttpRequestConfig axiosConfig?: EnclosureHttpRequestConfig,
): Promise<T> { ): Promise<T> {
const config = transformConfigByMethod(param, { const config = transformConfigByMethod(param, {
method, method,
@ -226,8 +212,7 @@ class EnclosureHttp {
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
Axios EnclosureHttp.axiosInstance.request(config)
.request(config)
.then((response: EnclosureHttpResoponse) => { .then((response: EnclosureHttpResoponse) => {
resolve(response.data); resolve(response.data);
}) })
@ -252,16 +237,7 @@ class EnclosureHttp {
): Promise<T> { ): Promise<T> {
return this.request<T>("get", url, params, config); 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; export default EnclosureHttp;

View File

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

View File

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