---
title: Api示例
date: 2021-02-03 09:26:32
permalink: /pages/5c0128/
---
# Api示例

::: tip
此处提供一个如何从后台调用接口的Api示例
:::

::: warning 注意
多个功能模块推荐创建多个api文件，方便代码维护
:::

1. 进入 `src>api>api` 文件夹中，创建一个文件，这里我们以UserApi.ts为例，并写入类的基本信息
    ``` ts
    class UserApi{

    }

   export default UserApi
    ```
2. 引入封装好的 `axios` 并继承

    ``` ts {1,3}
   import BaseAxios from '@/common/http'

   class UserApi extends BaseAxios<any, any>{

    }

   export default UserApi
    ```
3. 根据后台接口文档写入需要请求的方法，注意请求方法

    ``` ts {5,6,7,8,10,11,12,13}
   import BaseAxios from '@/common/http'

   class UserApi extends BaseAxios<any, any>{

        // 根据用户id获取角色id
        public getRoleByUserId(param: any): Promise<Base.AxiosResponse<any>> {
            return this.axios.get('/ftUser/getRoleByUserId', param)
        }

        // 给用户添加角色
        public addRole(param: any): Promise<Base.AxiosResponse<any>> {
            return this.axios.post('/ftUser/addRole', param)
        }
    }

   export default UserApi
    ```