请教一个typescript封装axios的问题
首先问题是现在有些接口需要loading,或者需要token之类的,需要一些额外的配置传进来判断,以前用js是直接像这样写就好了:
export function post(url: string, params: object, extraConfig?: Config) {
extraConfig = dealConfig(extraConfig);
return request({
url,
method: 'post',
data: params,
extraConfig
});
}
但是现在ts的话直接写会报错,只能加在了headers
里面,这样就会导致请求接口的时候能看到这个,就很奇怪的感觉:
不能在请求的时候delete extraConfig
,因为有些配置在响应的时候也需要用到。小弟刚开始用ts,请求大佬指点一下这一块的封装该怎么写?
完整代码如下:
import axios from 'axios';
const request = axios.create({
timeout: 50 * 1000,
headers: {
'Content-Type': 'application/json'
}
});
request.interceptors.request.use(
config => {
const headers = config.headers;
const { extraConfig } = headers;
if (extraConfig) {
const { needLoading, needToken } = extraConfig;
if (needLoading) {
// loading
}
if (needToken) {
// headers.token = xxxx;
}
}
return config;
},
error => {
return Promise.reject(error);
}
);
request.interceptors.response.use(
response => {
if (response.config.headers.extraConfig.needHandleError) {
// 需要处理的错误直接返回原样格式
}
// ...
},
error => {
// ...
}
);
interface Config {
needLoading?: boolean;
needToken?: boolean;
needHandleError?: boolean;
}
function dealConfig(extraConfig?: Config): Config {
const defaultExtraConfig = {
needLoading: true,
needToken: true,
needHandleError: false
};
if (typeof extraConfig === 'undefined') {
extraConfig = JSON.parse(JSON.stringify(defaultExtraConfig));
} else {
Object.keys(defaultExtraConfig).forEach(key => {
if (!Object.prototype.hasOwnProperty.call(extraConfig, key)) {
(extraConfig as Config)[key] = defaultExtraConfig[key];
}
});
}
return extraConfig;
}
export function post(url: string, params: object, extraConfig?: Config) {
extraConfig = dealConfig(extraConfig);
return request({
url,
method: 'post',
data: params,
headers: {
extraConfig
}
});
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论