使用 axios 在 React Typescript 中创建服务

Question

有两种不同的方法可以创建服务并从所需的功能组件调用。

1.

export const userProfileService = {

    ResetPassword: async (userId: string) => {
        var response = await http.get<string, boolean>(`UserProfile/ResetPassword?userId=${userId}`);
        return response;
    }
}

class UserProfileService {

    readonly userProfilePath = 'UserProfile';

    resetPassword = async (userId: string) => {
        var response = await http.get<string, boolean> 
      (`${this.userProfilePath}/ResetPassword?userId=${userId}`);
        return response;
    }
    export default new UserProfileService();


**The question is which way is better and optimized way? or better convention?**

Answer 1

为什么不把它变成一个函数呢？

export const resetPassword: async (userId: string) => {
         return await http.get<string, boolean>(`UserProfile/ResetPassword?userId=${userId}`);
    }

在这种情况下，将函数放在 class 或对象中似乎只会使事情复杂化和混淆。它看起来非常像受 C# 影响的风格。本身并不可怕或错误，但是当您只需要一个纯函数时，有点冗长和复杂。

此外，由于范围不同，您应该使用 let 或 const 关键字而不是 var。你没有在上面的代码中犯任何错误，因为 var 是 function-scoped，但使用 const 几乎总是更好（或者 let 如果你需要修改它） .

使用 axios 在 React Typescript 中创建服务

Creating service in React Typescript using axios

javascript

reactjs

typescript

react-hooks

javascript-objects