electron+vue3全家桶+vite项目搭建【七】集成axios并封装请求发送

引入

如果需要多语言支持，那么最好在项目搭建之初我们就集成好国际化

axios官网

demo项目地址

1.引入依赖

 npm install axios

2.封装通用请求工具类

我们在src下新建utils目录，然后创建一个request.ts

• 这里我们直接参考 vue3-element-admin对请求的封装

// src\\utils\\request.ts
import axios, { InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { useUserStoreHook } from '@/store/modules/user';// 创建 axios 实例
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 50000,headers: { 'Content-Type': 'application/json;charset=utf-8' }
});// 请求拦截器
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {const userStore = useUserStoreHook();if (userStore.token) {config.headers.Authorization = userStore.token;}return config;},(error: any) => {return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((response: AxiosResponse) => {const { code, msg } = response.data;if (code === '00000') {return response.data;}// 响应数据为二进制流处理(Excel导出)if (response.data instanceof ArrayBuffer) {return response;}ElMessage.error(msg || '系统出错');return Promise.reject(new Error(msg || 'Error'));},(error: any) => {if (error.response.data) {const { code, msg } = error.response.data;// token 过期,重新登录if (code === 'A0230') {ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', {confirmButtonText: '确定',type: 'warning'}).then(() => {localStorage.clear();window.location.href = '/';});} else {ElMessage.error(msg || '系统出错');}}return Promise.reject(error.message);}
);// 导出 axios 实例
export default service;

3.api案例

我们在src下新建一个api目录，里面新建一个auth目录，并创建index.ts和types.ts两个文件

// src\\api\\auth\\index.ts
import request from '../../utils/request';
import { AxiosPromise } from 'axios';
import { LoginData, LoginResult } from './types'/*** 登录API** @param data {LoginData}* @returns*/
export function loginApi(data: LoginData): AxiosPromise<LoginResult> {return request({url: '/auth/login',method: 'post',params: data});
}

// src\\api\\auth\\types.ts
/*** 登录请求参数*/
export interface LoginData {/*** 用户名*/username?: string;/*** 密码*/password?: string;
}/*** 登录响应*/
export interface LoginResult {/*** 访问token*/accessToken?: string;
}

4.测试代码

1.接着我们在HelloWorld.vue中添加一个按钮，并绑定点击事件发送一个登录请求：

<script setup lang="ts">
import { loginApi } from '../api/auth'function login() {loginApi({ username: 'lzp', password: '666' }).then(res => {console.log(res);});
}
</script><template><ul><li><el-button type="primary" @click="login">登录请求</el-button></li></ul>
</template>

2.接着我们可以去 https://www.fastmock.site/#/网站创建一个在线api模拟，大家也可以直接请求我的模拟api:

https://www.fastmock.site/mock/da142e3dbc6e2fcd1fab5c3d0dd789bf/electron-vue3

3.我们添加一个登录的模拟接口：

4.接着我们调整request.ts里面的baseUrl：

// 创建 axios 实例
const service = axios.create({baseURL: 'https://www.fastmock.site/mock/da142e3dbc6e2fcd1fab5c3d0dd789bf/electron-vue3',// ...
});

5.演示效果如图所示：