electron+vue2:发送请求 - IT评测·应用市场-qidao123.com技术社区

import { ipcMain,dialog } from "electron";
import axios from "axios";
const BASE_URL = 'http://xx.xx'
const Headers = {
Accept: "application/json, text/plain, */*"
}
export const http = () => {
ipcMain.handle("http-request", async (e, { url, method, data, params,headers}) => {
const _url = BASE_URL + url;
const _data = data?data:null
const _params = params?params:null
const _method = method;
try {
let response = null;
if (_method === "POST") {
response = await axios({
method:_method,
url: _url,
data: _data,
headers: Headers,
});
} else {
response = await axios({
method:_method,
url: _url,
params: _params,
headers: Headers,
});
}
return { data: response.data };
} catch (err) {
return { error: err.message };
}
});
};

复制代码

import http from './http.js'
http()

复制代码

//this.$electron是在main.js中绑定到了Vue.prototype上面
//const electron = window.require('electron')
//Vue.prototype.$electron = electron
const res = await this.$electron.ipcRenderer.invoke('http-request', {
url: '/system/auth/login',
method: 'POST',
data: {
password: "xxxx",
username: "xxxx",
}
})

复制代码

class ApiClient {
constructor(baseURL, options = {}) {
this.baseURL = baseURL;
this.defaultOptions = {
timeout: 30000,
credentials: 'include',
...options
};
// 请求拦截器
this.requestInterceptors = [];
// 响应拦截器
this.responseInterceptors = [];
}
/**
* 核心请求方法
*/
async _fetch(url, options) {
// 合并配置
const mergedOptions = {
...this.defaultOptions,
...options,
headers: {
...this.defaultOptions.headers,
...options.headers
}
};
// 应用请求拦截器
for (const interceptor of this.requestInterceptors) {
await interceptor(mergedOptions);
}
// 设置超时
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), mergedOptions.timeout);
try {
const fullUrl = this.baseURL ? `${this.baseURL}${url}` : url;
const response = await fetch(fullUrl, {
...mergedOptions,
signal: controller.signal
});
clearTimeout(timeoutId);
// 应用响应拦截器
let processedResponse = response;
for (const interceptor of this.responseInterceptors) {
processedResponse = await interceptor(processedResponse);
}
if (!processedResponse.ok) {
const errorData = await this._parseError(processedResponse);
throw new HttpError(
processedResponse.status,
errorData.message || 'Request failed',
errorData
);
}
return this._parseResponse(processedResponse);
} catch (error) {
clearTimeout(timeoutId);
if (error.name === 'AbortError') {
throw new HttpError(408, 'Request timeout');
}
throw error;
}
}
// 添加拦截器
addRequestInterceptor(interceptor) {
this.requestInterceptors.push(interceptor);
}
addResponseInterceptor(interceptor) {
this.responseInterceptors.push(interceptor);
}
// 快捷方法
get(url, options = {}) {
return this._fetch(url, { ...options, method: 'GET' });
}
post(url, body, options = {}) {
return this._fetch(url, {
...options,
method: 'POST',
body: JSON.stringify(body),
headers:{
'Content-Type':'application/json'
}
});
}
put(url, body, options = {}) {
return this._fetch(url, {
...options,
method: 'PUT',
body: JSON.stringify(body)
});
}
delete(url, options = {}) {
return this._fetch(url, { ...options, method: 'DELETE' });
}
// 文件上传
upload(url, formData, options = {}) {
const headers = {
...options.headers,
};
delete headers['Content-Type'];
return this._fetch(url, {
...options,
method: 'POST',
body: formData,
headers
});
}
// 解析响应
async _parseResponse(response) {
const contentType = response.headers.get('content-type') || '';
if (contentType.includes('application/json')) {
return response.json();
}
if (contentType.includes('text/')) {
return response.text();
}
return response.blob();
}
// 解析错误
async _parseError(response) {
try {
return await response.json();
} catch {
return { message: response.statusText };
}
}
}
const Http = new ApiClient(ELECTRON_CONFIG.AXIOS_URL);
// 添加请求拦截器
Http.addRequestInterceptor(async (options) => {
//请求拦截添加token
});
// 添加响应拦截器
Http.addResponseInterceptor(async (response) => {
return response;
});
export default Http

复制代码

import Http from '@/Http/http'
Vue.prototype.$Http = Http

复制代码

const res = await this.$Http.upload('xxx',data)
if(res.code == 500){
this.$message.error(res.msg)
return
}

复制代码