我是reactjs的新手,我想做一些服务来与API交互,我想让http服务更通用,这样它就可以在其他组件中使用。
import axios from "axios";
import { CanceledError } from "axios";
export default axios.create({
baseURL: "https://jsonplaceholder.typicode.com/",
});
export { CanceledError };
字符串
首先,我为API调用创建baseURL,并创建一个包含方法2(如get、post和put)的通用http服务
import apiClient from "./api-client";
interface Entity {
id: number;
name: string;
}
class HttpServices {
endpoint: string;
constructor(endpoint: string) {
this.endpoint = endpoint;
}
getAll<T>() {
const controller = new AbortController();
const request = apiClient.get<T[]>(this.endpoint, {
signal: controller.signal,
});
return { request, cancel: () => controller.abort() };
}
delete(id: number) {
return apiClient.delete(this.endpoint + "/" + id);
}
add<T>(entity: T) {
return apiClient.post(this.endpoint, entity);
}
update<T extends Entity>(updatedEntity: T) {
return apiClient.patch(
this.endpoint + "/" + updatedEntity.id,
updatedEntity
);
}
}
//export default new HttpServices();
const create = (endpoint: string) => new HttpServices(endpoint);
export default create;
型
然后我使用通用的http服务来处理用户,并将用户的端点
import create from "./http-service";
export interface User {
id: number;
name: string;
}
export default create("users");
型
并且我使用表单更新用户组件中的用户服务
const updateUser = (users: User) => {
const originalUser = [...user];
const updatedUser = { ...users, name: users.name + "!" };
setUsers(user.map((u) => (u.id === users.id ? updatedUser : u)));
userServices.update(updatedUser).catch((err) => {
setErrors(err.message);
setUsers(originalUser);
});
};
型
希望你们能理解我的解释
所以,问题是...
如果您在通用http服务中看到使用接口Entity来扩展包含id和name的通用占位符保持器数据类型,该数据类型与用户服务中的用户接口相同,那么如果我想使用具有id,name和description的类别接口来创建类别服务,该怎么办?如果我在Entity接口中添加了描述,当我在updateUser方法“Argument of type”{ name:string; id:number;“}"不能分配给类型为”“的参数。”我怎样才能使接口更灵活或更容易接受?或者对此有什么建议?
我只是想知道我问题的解决办法
1条答案
按热度按时间qrjkbowd1#
我想你正在寻找这样的解决方案:
HttpService
中,您需要完全满足axios内置类型,以使您的基础服务更加灵活。ApiServiceFactory
,这些ApiServiceFactory
将使用不同的axios设置(如headers
或baseUrl
)示例化您的实体特定服务,如UserService
、AuthService
或CategoryService
。constructor
({baseUrl: 'https://myapi.com/${baseUrl}'}
)中硬编码起始路径。然后ApiServiceFactory('user')
将示例化axios与baseUrl: 'https://myapi.com/user'
;而ApiServiceFactory('category')
导致axios与baseUrl: 'https://myapi.com/category'
等等。User
与https://api1.com/user
相关,Category
与https://someotherapi.com/v1/en/category
相关。你需要在基本HttpService
构造函数中保留baseUrl
以清空并在工厂中使用CategoryService extends ApiServiceFactory('https://someotherapi.com/v1/en/category')
指定完整的urlUser
,UpdateUser
,Category
,CreateCategory
,ManyId
,Record<SignUpFieldsEnum, string>
,Record<SignInFieldsEnum, string>
。基本
ApiService
类:字符串
UserService
类:型
AuthService
类:型
CategoryService
类:型