请求配置

项目中默认自带了基于axios封装的基础的请求配置，在utils/request.ts中提供了最基础的配置，可以根据自己的项目需求进行二次扩展。

自动导入

为了方便我们在项目中使用，在composables/api.ts中提供了自动导入的配置。

默认支持了四种自动请求方式的自动导入，分别是：useGet、usePost、usePut以及useDelete。

请求用法

我们并没有对api的请求存放位置做过多的封装限制，大家可以根据自己的使用习惯进行使用。

我们推荐在src下创建一个api的目录用于存放所有的请求接口，按照与页面结构相同的分组形式进行使用。

下面是一个简单的例子：

例如我们在pages/common/login.vue的页面，我们可以在api/common/login.ts中创建一个login的请求接口。

export interface LoginParams {
  username: string
  password: string
}

export interface LoginResultModel {
  token: string
}

export const loginApi = (params: LoginParams) => {
  return usePost<LoginResultModel, LoginParams>('/login', params)
  // 如果不希望传参数的类型，
  // 可以直接使用 usePost<LoginResultModel>('/login', params)既可
}

export interface LoginParams {
  username: string
  password: string
}

export interface LoginResultModel {
  token: string
}

export const loginApi = (params: LoginParams) => {
  return usePost<LoginResultModel, LoginParams>('/login', params)
  // 如果不希望传参数的类型，
  // 可以直接使用 usePost<LoginResultModel>('/login', params)既可
}

在页面中我们可以直接使用这个请求接口：

vue

<script lang="ts" setup>
import { loginApi } from '~/api/common/login'

const handleSubmit = async()=>{
  const { data } = await loginApi({
    username: 'admin',
    password: 'admin',
  })
  console.log(data?.token)
}
</script>

<script lang="ts" setup>
import { loginApi } from '~/api/common/login'

const handleSubmit = async()=>{
  const { data } = await loginApi({
    username: 'admin',
    password: 'admin',
  })
  console.log(data?.token)
}
</script>

全局请求loading使用

全局loading相关配置可在utils/loading.ts中自行更改

如下：

import { useLoading } from '@/composables/base-loading'
import { LoadingEnum } from '~#/loadingEnum'
/**
 * 全局loading配置
 * @param spin loading样式
 * @param minTime loading最短时间
 * @param modal loading遮罩是否开启
 * @param background loading背景
 * @param textColor loading文字颜色
 * @param color loading文字
 */
const loading = useLoading({
  spin: LoadingEnum.CHASE,// PULSE、RECT 、PLANE、CUBE、PRELOADER、 CHASE 、DOT
  minTime: 500,
  // text: '正在加载中...'
  // textColor: '#79bbff'
  // background: 'rgba(0, 0, 0, .5)'
  // modal: true
})

export class AxiosLoading {
  loadingCount: number
  constructor() {
    this.loadingCount = 0
  }

  addLoading() {
    if (this.loadingCount === 0)
      loading.open()

    this.loadingCount++
  }

  closeLoading() {
    if (this.loadingCount > 0) {
      if (this.loadingCount === 1)
        loading.close()
      this.loadingCount--
    }
  }
}

import { useLoading } from '@/composables/base-loading'
import { LoadingEnum } from '~#/loadingEnum'
/**
 * 全局loading配置
 * @param spin loading样式
 * @param minTime loading最短时间
 * @param modal loading遮罩是否开启
 * @param background loading背景
 * @param textColor loading文字颜色
 * @param color loading文字
 */
const loading = useLoading({
  spin: LoadingEnum.CHASE,// PULSE、RECT 、PLANE、CUBE、PRELOADER、 CHASE 、DOT
  minTime: 500,
  // text: '正在加载中...'
  // textColor: '#79bbff'
  // background: 'rgba(0, 0, 0, .5)'
  // modal: true
})

export class AxiosLoading {
  loadingCount: number
  constructor() {
    this.loadingCount = 0
  }

  addLoading() {
    if (this.loadingCount === 0)
      loading.open()

    this.loadingCount++
  }

  closeLoading() {
    if (this.loadingCount > 0) {
      if (this.loadingCount === 1)
        loading.close()
      this.loadingCount--
    }
  }
}

如何使用？下面是一个简单的例子：

例如我们在api/common/login.ts中的login接口使用,只需config配置中开启loading即可。

export interface LoginParams {
  username: string
  password: string
}

export interface LoginResultModel {
  token: string
  // 是否开启全局请求loading
  loading: true
}

export const loginApi = (params: LoginParams) => {
  return usePost<LoginResultModel, LoginParams>('/login', params)
}

export interface LoginParams {
  username: string
  password: string
}

export interface LoginResultModel {
  token: string
  // 是否开启全局请求loading
  loading: true
}

export const loginApi = (params: LoginParams) => {
  return usePost<LoginResultModel, LoginParams>('/login', params)
}

响应格式

默认情况下，我们希望后端接口返回的所有数据格式应使用如下的格式：

export interface ResponseBody<T = any> {
  code: number
  data?: T // data作为一个可选参数，如果没有返回值，可以不传
  msg: string
}

export interface ResponseBody<T = any> {
  code: number
  data?: T // data作为一个可选参数，如果没有返回值，可以不传
  msg: string
}

如若格式不一致，可以在utils/request.ts中进行修改。

我们建议使用restful的接口规范，例如：

200

处理所有请求成功的状态，其中响应的状态码也应为200。

json

{
  "code": 200,
  "data": {
    "token": "xxxxx"
  },
  "msg": "success"
}

{
  "code": 200,
  "data": {
    "token": "xxxxx"
  },
  "msg": "success"
}

在这种情况下，我们还可以扩展一些常用的其他的code码，例如：

我们实现轮询查询某个任务的状态，如果任务还在执行中，我们可以返回一个100001code码，表示任务还在执行中。

json

{
  "code": 100001,
  "msg": "任务正在执行中"
}

{
  "code": 100001,
  "msg": "任务正在执行中"
}

当code码为100002的时候，表示任务执行完成。

json

{
  "code": 100002,
  "msg": "任务执行完成"
}

{
  "code": 100002,
  "msg": "任务执行完成"
}

就结束前端的轮询任务，等等

401

处理未授权的请求，例如未登录的请求，响应的状态码应为401。

json

{
  "code": 401,
  "msg": "未登录"
}

{
  "code": 401,
  "msg": "未登录"
}

403

其他错误的请求，例如处理请求登录接口账号密码不正确等等，响应的状态码应为403。

json

{
  "code": 403,
  "msg": "账号或密码不正确"
}

{
  "code": 403,
  "msg": "账号或密码不正确"
}

500

处理服务器错误的请求，例如处理服务端网关报错的情况，响应的状态码应为500。

json

{
  "code": 500,
  "msg": "服务器错误"
}

{
  "code": 500,
  "msg": "服务器错误"
}

请求配置 ​

自动导入 ​

请求用法 ​

全局请求loading使用 ​

响应格式 ​

请求配置

自动导入

请求用法

全局请求loading使用

响应格式