coderly0224 / axios-bz Goto Github PK

English | 中文

• 🌊 Token insensitive refresh
• 🕸️ Api Centralized Management
• 🦍 Typescript response type encapsulation
• 🤖 Interceptor encapsulation

Create a network folder in your project root directory, and move all files and folders under this project to the network folder.

The api folder in the project stores all the api management. You can use 'namespace' to divide modules according to the project to solve the function naming conflict.

import ApiInstance from '@/network'

export namespace UserAuthApi {
  export interface LoginParamsType {
    username: string;
    password: string;
  }

  export interface LoginResultType {
    access: string;
    permission: string[];
  }

  // LOGIN
  export const login = (data: LoginParamsType) => ApiInstance.request<LoginResultType>({
    url: '/token/login',
    method: 'post',
    data
  });
}

<script setup lang="ts">
// import Api
import UserAuthApi from '@/network/api/UserAuthApi.ts'
// data
const formData=ref<UserAuthApi.LoginParamsType>({
    username:'张三',
    password:'123456',
})

const login = async () => {
    // request data
    const result = await UserAuthApi.login(formData.value)
    // some things ...
}
</script>