c++碎片小知识-CFANZ编程社区

1. 前言

2. 引入 Aioxs

2.1. 安装依赖

npm install axios

2.2. 封装请求工具类

新建目录 src/utils，新建文件 request.ts

import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // 请求成功做点什么
    return config
  },
  function (error) {
    // 对请求错误做点什么
    return Promise.reject(error)
  }
)
// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应成功做点什么
    return response
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

3. 整合 Mock.js + vite-plugin-mock

3.1. 安装依赖

npm i  mockjs vite-plugin-mock -D

3.2. vite.config.ts 配置

// vite.config.ts
import { viteMockServe } from 'vite-plugin-mock' // [!code ++]

export default defineConfig({
  plugins: [
    vue(),
    // 添加 vite-plugin-mock 插件
    viteMockServe({ // [!code ++]
      // mock 数据文件所在的目录 // [!code ++]
      mockPath: './src/mock', // [!code ++]
      enable: true, // [!code ++]
      logger: true // [!code ++]
    }), // [!code ++]
  ]
})

3.3. 定义接口

新建文件夹 src/api，新建文件 user.ts

类型定义

// data.d.ts 统一返回类型
export interface ApiRes<T> {
  success: boolean
  code: number
  data?: T
  message: string
}

// user.d.ts
// 用户信息
export interface UserInfo {
  id?: string
  username?: string
  avatar?: string
}

API接口定义

// api/user/index.ts
import type { UserInfo } from '@/types/user'

import request from '@/utils/request'
// 获取当前用户信息
export const getUserInfo = () => {
  return request<UserInfo>({
    method: 'GET',
    url: '/user'
  })
}

3.4. 新建 src/mock 目录，新建 user.ts

import type { UserInfo } from '@/types/user'

export default [
  // 用户登录
  {
    url: '/api/user',
    method: 'GET',
    response: () => {
      return {
        code: 20000,
        success: true,
        message: '请求成功。',
        data: <UserInfo>{
          id: '1',
          username: 'admin',
          avatar: ''
        }
      }
    }
  }
]

3.5. 测试

在 App.vue 页面加个 button 添加点击登录事件

<script>
import { getUserInfo } from '@/api/user'

const getInfo = async () => {
  const res = await getUserInfo()
  console.log(res)
}
</script>
<template>
	<el-button type="primary" size="default" class="bg-green-500" @click="getInfo">获取用户信息</el-button>
</template>

启动项目，点击测试

可以看到，如我们所预期的那样拿到了结果。那么后面想要什么数据自己定义好接口返回就行了。

4. 一点点优化

在这里插入图片描述

我们改成 res.data.data.id，成功取到值了，但是这个时候会发现 vscode 爆红了，提示找不到类型
在这里插入图片描述

这里主要是因为，我们导出 axios 对象的时候，没有确定好类型，vscode 检测异常了, 而且在请求接口过程中，其实对于我们有用的信息就是最终的 data 对象，所以这里在封装的 request.ts 中，我们进行统一处理。

4.1. 在响应拦截器中进行解构，返回 data 对象

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应成功做点什么
    const { success, message, data } = response.data
    if (success) {
      return data
    } else {
      // 请求失败，业务失败，消息提示
      return Promise.reject(new Error(message))
    }
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

4.2. 在导出 axios 对象的时候进行类型指定

// 指定返回数据类型，类型推断提示
export default async <T = any>(config: AxiosRequestConfig) => {
  const response: T = await instance(config)
  return response
}

这个时候再去刚才测试的地方发现直接通过返回对象就可以有提示信息，并且可成功拿到返回结果。如果发现没有提示或者爆红，重启一下 vscode。

在这里插入图片描述

5. 环境切分

5.1. 创建 .env.development，注意这里的变量名必须以 VITE_ 开头

# 标志
ENV = 'development'

# base api
VITE_APP_BASE_API = '/mock'

5.2. 为我们自定义的变量添加类型扩展

// env.d.ts
// 扩展环境变量
interface ImportMetaEnv {
    readonly VITE_APP_BASE_API: string
    // 更多环境变量...
  }
  
  interface ImportMeta {
    readonly env: ImportMetaEnv
 }