# axios-bz

**Repository Path**: QC2168/axios-bz

## Basic Information

- **Project Name**: axios-bz
- **Description**: 通用的axios封装方案，集中式Api管理，拦截器封装，请求响应类型封装，token无感刷新
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-03-15
- **Last Updated**: 2024-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 📦 axios通用封装方案

### 语言
[English](https://github.com/QC2168/axios-bz) | [中文](https://github.com/QC2168/axios-bz/blob/main/README.zh-cn.md)


### 功能
- 🌊 token无感刷新
- 🕸️ Api集中式管理
- 🦍 typescript响应类型封装
- 🤖 拦截器封装

### 使用方法

在你的项目中新建`network`文件夹，将本项目下的所有文件及文件夹移动到`network`文件夹即可。

### API放哪里？
项目中的`api`文件夹中存放着所有`api`的管理，您可以按照项目使用`namespace`进行划分模块，解决函数命名冲突问题。

###  例子

#### Api

```typescript
import ApiInstance from '@/network'

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

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

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

```
#### script

```vue
<script setup lang="ts">
// 引入Api文件
import UserAuthApi from '@/network/api/UserAuthApi.ts'
// 数据
const formData=ref<UserAuthApi.LoginParamsType>({
    username:'张三',
    password:'123456',
})

const login = async () => {
    // 请求数据
    const result = await UserAuthApi.login(formData.value)
    // 对请求回来的数据进行一些处理...
}
</script>
```