本文将介绍如何在electron中封装使用axios
前期准备:我们需要搭建好electron项目,并配置好node,npm等环境后进行以下操作。如何搭建electron项目?请参考此章节:electron项目的搭建并集成串口工具
一、准备工作,下载axios依赖并在页面中引用
1.下载axios
与vue同样的,都是使用npm下载依赖后进行引入。代码如下
npm install axios
2.引用axios
找到main.js文件,目录:src\renderer\main.js 插入以下代码:
import axios from 'axios'
Vue.http = Vue.prototype.$http = axios
二、封装axios.js文件,便于在请求接口页面使用
找到一个用于存放封装方法的目录下,我们封装一个axios.js的文件。我在renderer\router目录下新建axios.js文件,并封装方法,axios.js文件代码如下:
/**
* 全站http配置
*
* axios参数说明
* isSerialize是否开启form表单提交
* isToken是否需要token
*/
import axios from 'axios'
import { Message } from 'element-ui'
// 创建实例
const axiosInstance = axios.create({
// 请求域名
// baseURL: "http://103.121.166.82",
// 打包用
baseURL: "http://127.0.0.1:5000",
// 开发用(lm)
// baseURL: "http://192.168.0.114:5000",
// 设置超时时间
timeout: 1000 * 30,
method: 'post',
// 请求头
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
})
// axios.defaults.timeout=1000 * 30
// axios.defaults.validateStatus = function (status) {
// return status >= 200 && status <= 500
// }
// 请求拦截器
axiosInstance.interceptors.request.use(
config => {
config.headers['Authorization'] = 'token'
return config
},
error => {
console.error("error", error)
Promise.reject(error)
}
)
// 响应拦截器
axiosInstance.interceptors.response.use(
function (res) {
if (res.status === 200) {
if (res.data.code === 'success') {
return res.data
} else { //数据异常处理
// Message.info(JSON.stringify(res.data.code))
return res.data
}
}
},
function (error) {
return Promise.reject(error)
}
)
export default axiosInstance
三、axios的使用
创建一个专门用于写接口的js文件。我在renderer\api下创建mapcontron.js
注:以下代码为请求示例,实际情况请根据自己的业务需求进行灵活变通。文章来源:https://www.toymoban.com/news/detail-843685.html
import request from '../router/axios'
//三维测绘列表展示接口(get请求示例)
export const getTasks = (params) => {
return request.get(`/tasks?filter=${params}`,{})
}
//三维测绘获取任务状态信息接口(post请求示例)
export const controlRules = (id, params) => {
return request.post(`/tasks/${id}`, params)
}
四、在electron页面中调用接口
以大标题三中展示的两个接口作为示例进行代码展示。
首先创建vue界面后,根据自己的情况在页面中调用接口。以下代码目录存在于以.vue结尾的文件文章来源地址https://www.toymoban.com/news/detail-843685.html
<template>
<div class='test'>...</div>
</template>
<script>
import { getTasks, controlRules } from "../../api/mapcontron"; //将两个请求方法引入页面
export default{
data(){
return{
data:[]
}
},
methods:{
//创建task方法用于请求数据get方法
async task(e){
let data; //声明data用于请求完数据进行存储
switch (e){ //这里使用switch判断需要给接口进行的传参
case 1:
data = await getTasks('all');
break;
case 2:
data = await getTasks("active");
break;
}
if(data.code == 'success' && data.response !=[]){ //如果请求数据拿到,根据后台返回的数据进行逻辑判断,并从中取到结果并赋值和渲染页面
this.data = data.response;
}
}
//创建chooseControl方法,用于调取post请求方法
async chooseControl(e){
let params = { //params为需要进行的传参,此示例需要传cmd:e,e为chooseControl方法动态传入参数
cmd:e
}
let data = await controlRules(this.chooseId,params); //括号中的传参请根据在js文件中封装的方法传参对应进行参考
if(data.code == 'success'){
this.$message({
type:"success",
message:"操作成功!"
});
}else{
this.$message({
type:"error",
message:data.code
})
}
}
}
}
</script>
到了这里,关于【electron+axios】如何在electron中封装使用axios,从下载到使用保姆级教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!