IT评测·应用市场-qidao123.com技术社区

标题: 05.整合Axios+MockJs [打印本页]
作者: 海哥    时间: 2024-12-6 07:23
标题: 05.整合Axios+MockJs
1. 媒介

   作为前后端分离的项目，必不可少的当然是发请求向后端拿数据了， 但是不可能每次比及接口完成我们才开始开辟前端，以是使用 mock.js 先模仿后端接口，等后端接口开辟完成后，可以无缝衔接，直接替换为真正的后端服务。
可以简朴了解一下就行，因为我们这个项目是全栈开辟，以是不会有这种环境，反正都得自己写，没须要整这么麻烦。
  2. 引入 Aioxs

   Axios 是一个基于 promise 的网络请求库，进一步了解参考官方文档：axios-http.com/zh/
  2.1. 安装依赖

  1. npm install axios
复制代码
2.2. 封装请求工具类

新建目录 src/utils，新建文件 request.ts
  1. import axios from 'axios'
  3. const instance = axios.create({
  4.   baseURL: '/api',
  5.   timeout: 5000
  6. })
  7. // 添加请求拦截器
  8. instance.interceptors.request.use(
  9.   function (config) {
  10.     // 请求成功做点什么
  11.     return config
  12.   },
  13.   function (error) {
  14.     // 对请求错误做点什么
  15.     return Promise.reject(error)
  16.   }
  17. )
  18. // 添加响应拦截器
  19. instance.interceptors.response.use(
  20.   function (response) {
  21.     // 对响应成功做点什么
  22.     return response
  23.   },
  24.   function (error) {
  25.     // 对响应错误做点什么
  26.     return Promise.reject(error)
  27.   }
  28. )
  30. export default instance
复制代码
3. 整合 Mock.js + vite-plugin-mock

   Mock.js 生成随机数据，拦截 Ajax 请求。进一步了解参考官方文档：mockjs.com/
vite-plugin-mock 这是一个插件，更方便的编写 mock接口， 文档地址：https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md
  3.1. 安装依赖

  1. npm i  mockjs vite-plugin-mock -D
复制代码
3.2. vite.config.ts 配置

  1. // vite.config.ts
  2. import { viteMockServe } from 'vite-plugin-mock' // [!code ++]
  4. export default defineConfig({
  5.   plugins: [
  6.     vue(),
  7.     // 添加 vite-plugin-mock 插件
  8.     viteMockServe({ // [!code ++]
  9.       // mock 数据文件所在的目录 // [!code ++]
  10.       mockPath: './src/mock', // [!code ++]
  11.       enable: true, // [!code ++]
  12.       logger: true // [!code ++]
  13.     }), // [!code ++]
  14.   ]
  15. })
复制代码
3.3. 界说接口

新建文件夹 src/api，新建文件 user.ts
类型界说
   这里用的是 ts 以是对于类型要求比较严酷，以是要界说好我们生成数据的类型 新建 src/types 文件夹，data.d.ts 中我界说了统一的一些类型，user.d.ts 则是用户相干的类型
  1. // data.d.ts 统一返回类型
  2. export interface ApiRes<T> {
  3.   success: boolean
  4.   code: number
  5.   data?: T
  6.   message: string
  7. }
复制代码
  1. // user.d.ts
  2. // 用户信息
  3. export interface UserInfo {
  4.   id?: string
  5.   username?: string
  6.   avatar?: string
  7. }
复制代码
API接口界说
  1. // api/user/index.ts
  2. import type { UserInfo } from '@/types/user'
  4. import request from '@/utils/request'
  5. // 获取当前用户信息
  6. export const getUserInfo = () => {
  7.   return request<UserInfo>({
  8.     method: 'GET',
  9.     url: '/user'
  10.   })
  11. }
复制代码
3.4. 新建 src/mock 目录，新建 user.ts

  1. import type { UserInfo } from '@/types/user'
  3. export default [
  4.   // 用户登录
  5.   {
  6.     url: '/api/user',
  7.     method: 'GET',
  8.     response: () => {
  9.       return {
  10.         code: 20000,
  11.         success: true,
  12.         message: '请求成功。',
  13.         data: <UserInfo>{
  14.           id: '1',
  15.           username: 'admin',
  16.           avatar: ''
  17.         }
  18.       }
  19.     }
  20.   }
  21. ]
复制代码
3.5. 测试


  1. <script>
  2. import { getUserInfo } from '@/api/user'
  4. const getInfo = async () => {
  5.   const res = await getUserInfo()
  6.   console.log(res)
  7. }
  8. </script>
  9. <template>
  10.         <el-button type="primary" size="default" class="bg-green-500" @click="getInfo">获取用户信息</el-button>
  11. </template>
复制代码

可以看到，如我们所预期的那样拿到了效果。那么后面想要什么数据自己界说好接口返回就行了。
4. 一点点优化

   我们想要拿到具体返回的内容，输入 res.data. 的时候由于 ts 类型检测给了我们提示，如果打印 res.data.id ,出来会是 undefined，因为从打印的 res 效果可以知道，其实我们要拿的数据应该在，res.data.data 里。
  


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

这里重要是因为，我们导出 axios 对象的时候，没有确定好类型，vscode 检测非常了, 而且在请求接口过程中，其实对于我们有用的信息就是终极的 data 对象，以是这里在封装的 request.ts 中，我们进行统一处理。
4.1. 在响应拦截器中进行解构，返回 data 对象

  1. // 添加响应拦截器
  2. instance.interceptors.response.use(
  3.   function (response) {
  4.     // 对响应成功做点什么
  5.     const { success, message, data } = response.data
  6.     if (success) {
  7.       return data
  8.     } else {
  9.       // 请求失败，业务失败，消息提示
  10.       return Promise.reject(new Error(message))
  11.     }
  12.   },
  13.   function (error) {
  14.     // 对响应错误做点什么
  15.     return Promise.reject(error)
  16.   }
  17. )
复制代码
4.2. 在导出 axios 对象的时候进行类型指定

  1. // 指定返回数据类型，类型推断提示
  2. export default async <T = any>(config: AxiosRequestConfig) => {
  3.   const response: T = await instance(config)
  4.   return response
  5. }
复制代码
这个时候再去刚才测试的地方发现直接通过返回对象就可以有提示信息，并且可成功拿到返回效果。 如果发现没有提示或者爆红，重启一下 vscode。

5. 环境切分

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

  1. # 标志
  2. ENV = 'development'
  4. # base api
  5. VITE_APP_BASE_API = '/mock'
复制代码
5.2. 为我们自界说的变量添加类型扩展

  1. // env.d.ts
  2. // 扩展环境变量
  3. interface ImportMetaEnv {
  4.     readonly VITE_APP_BASE_API: string
  5.     // 更多环境变量...
  6.   }
  7.   
  8.   interface ImportMeta {
  9.     readonly env: ImportMetaEnv
  10. }
复制代码
修改 request.ts中的 baseURL，这时可以看到有提示。

修改 mock.ts 中界说的接口，将前缀改成 /mock


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4