# 从零开始搭建前端项目六（axios+mock）从零开始一步一步搭建一个精简的前端项目。技术栈：Vue3.0 + Vite + TypeScript + Element Plus + Vue Router + axios + Pinia 规范化：Eslint + Airbnb JavaScript Style + husky + lint-staged 包管理：yarn ## 历史内容 [从零开始搭建前端项目一（Vue3+Vite+TS+Eslint+Airbnb+prettier）](https://juejin.cn/post/7068215238935445540) [从零开始搭建前端项目二（husky+lint-staged）](https://juejin.cn/post/7068217828846862350) [从零开始搭建前端项目三（Element Plus）](https://juejin.cn/post/7068988751535407112) [从零开始搭建前端项目四（Vue Router）](https://juejin.cn/post/7069331636428472334) [从零开始搭建前端项目五（vite.config.ts优化）](https://juejin.cn/post/7071558351296921614) ## 本章内容在项目中加入mock，封装axios，搭建前端网络请求调试环境。 ## mock ### 安装安装依赖。 ```powershell yarn add mockjs vite-plugin-mock --dev ``` ### 配置配置 `vitePlugins.ts`（上一章已经把`vite.config.ts`中的`plugins`抽取到`vitePlugins.ts`中）。 ```ts // vitePlugins.ts import { viteMockServe } from 'vite-plugin-mock'; // ++ export default (env: ConfigEnv) => { const isBuild = env.command === 'build'; const vitePlugins: (Plugin | Plugin[])[] = [ // ... ]; // ++ if (!isBuild) { vitePlugins.push( viteMockServe({ ignore: /^\_/, mockPath: 'mock', localEnabled: !isBuild, // 实际开发关闭 prodEnabled: false, injectCode: ` import { setupProdMockServer } from '../mock/_createProductionServer'; setupProdMockServer(); `, }) ); } return vitePlugins; }; ``` 在项目根目录下创建mock文件夹，在mock文件夹下创建`_createProdMockServer.ts`文件，批量加载mock文件夹下的所有接口。 ```ts // _createProdMockServer.ts import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'; // 批量加载 const modules = import.meta.globEager('./mock/*.ts'); const mockModules: Array = []; Object.keys(modules).forEach((key) => { if (key.includes('/_')) { return; } mockModules.push(...modules[key].default); }); export default function setupProdMockServer() { createProdMockServer(mockModules); } ``` ### 测试在mock文件夹下创建`user.ts`，加入模拟登录接口。 ```ts import { MockMethod } from 'vite-plugin-mock'; export default [ { url: '/textMock', timeout: 200, method: 'POST', response: () => { return { code: 0, data: { token: 'eca4bb1529bb5b4dcd3c9aa68e9e185d', expire: 1200, onLine: true, }, msg: 'success', }; }, }, ] as MockMethod[]; ``` 运行，访问该api。 ![ts16.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a8070d6df7d74ddeb1df8963c21b154b~tplv-k3u1fbpfcp-watermark.image?) ![ts17.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6f3f13d4af148dab3e49dae635c0778~tplv-k3u1fbpfcp-watermark.image?) ## axios封装 ### 安装 ```powershell yarn add axios ``` ### 封装在`src`文件夹下创建utils->http文件夹，在http文件夹下创建`baseAxios.ts`文件。 ```ts import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'; import qs from 'qs'; import isPlainObject from 'lodash/isPlainObject'; import router from '@router/index'; import { IResponse, RequestOptions } from '@models/axios/axios'; // 如果请求话费了超过 `timeout` 的时间，请求将被中断 axios.defaults.timeout = 1000 * 30; // 表示跨域请求时是否需要使用凭证 axios.defaults.withCredentials = false; // 允许跨域 axios.defaults.headers.post['Access-Control-Allow-Origin-Type'] = '*'; // 返回支持的状态码 axios.defaults.validateStatus = function (status: number) { return status >= 200 && status <= 500; }; const axiosInstance: AxiosInstance = axios.create({ baseURL: `${import.meta.env.BASE_URL}`, }); // axios实例拦截响应 axiosInstance.interceptors.response.use( (response: AxiosResponse) => { return response; }, (error) => { return Promise.reject(error); } ); // axios实例拦截请求 axiosInstance.interceptors.request.use( (config: AxiosRequestConfig) => { config.headers['Accept-Language'] = 'zh-CN'; // 防止get请求缓存 if (config.method === 'get') { config.params = { ...config.params, ...{ _t: new Date().getTime() }, }; } if (isPlainObject(config.data)) { // eslint-disable-next-line no-param-reassign config.data = { ...config.data, }; if (config.headers?.['content-type']) { const contentType: string = config.headers['content-type'] + ''; if (/^application\/x-www-form-urlencoded/.test(contentType)) { // form形式编码 config.data = qs.stringify(config.data); } } } return config; }, (error) => { return Promise.reject(error); } ); const request = ( config: AxiosRequestConfig, options?: RequestOptions ): Promise => { const conf = config; return new Promise((resolve, reject) => { axiosInstance .request>(conf) .then((res: AxiosResponse) => { const data: any = res; resolve(data as T); }) .catch((error) => reject(error)); }); }; // 封装get export function get( config: AxiosRequestConfig, options?: RequestOptions ): Promise { return request({ ...config, method: 'GET' }, options); } // 封装post export function post( config: AxiosRequestConfig, options?: RequestOptions ): Promise { return request({ ...config, method: 'POST' }, options); } export default request; export type { AxiosInstance, AxiosResponse }; ``` ## 接口在`src`文件下创建`api`文件夹，在`api`文件夹下创建各个接口定义，如创建`userLogin.ts`文件。 ```ts import { post } from '@utils/http/baseAxios'; import { IResponse } from '@models/axios/axios'; import { LoginData } from '@models/user/user'; /** * @description: 用户登录 * @params {LoginData} params * @return {Promise} */ export const login = (params: LoginData): Promise => { return post({ url: 'user/login', params }).then((res) => res.data); }; ``` ## 网络请求使用实例在使用 async...await 方法时，经常采用 try...catch 捕获异常，如果有多个异步操作，需要每一次书写 try...catch。这样代码的简洁性较差，为了使代码更加的优雅，我们通过使用 `await-to-js` js 库来处理异常。 ### 安装await-to-js ```powershell yarn add await-to-js ``` ### 使用 ```js ``` ## 小结本篇介绍了在开发过程中如何使用mock模拟网络请求，封装axios，使用await-to-js更优雅地处理网络请求。