【electron+axios】如何在electron中封装使用axios,从下载到使用保姆级教程

这篇具有很好参考价值的文章主要介绍了【electron+axios】如何在electron中封装使用axios,从下载到使用保姆级教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文将介绍如何在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
注:以下代码为请求示例,实际情况请根据自己的业务需求进行灵活变通。

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发中的ajax请求、axios封装

    目录 浏览器http请求 同步 js标签跨域、url 异步ajax、websock协议 ajax是异步的技术术语,最早的api是xhr(XMLHttpRequest) fetch es6 api axios 封装axios(无论用requst还是axios请求都会生效) src/utils/request.ts请求/响应拦截器封装 ts post请求request.post(url)和 通用请求request({url,method:\\\'post\\\'})对象

    2024年02月11日
    浏览(48)
  • 前端(二十七)——封装指南:Axios接口、常用功能、Vue和React中的封装技术

    😊博主:小猫娃来啦 😊文章核心: 前端封装指南:Axios接口、常用功能、Vue和React中的封装技术 在我们前端开发当中,封装是种将代码和功能组织起来以便重复使用的方式。它可以使开发人员更高效地编写、维护和管理代码。本文将探讨前端封装的定义、重要性以及在Web开

    2024年02月05日
    浏览(44)
  • 前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

    2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名 下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面

    2024年02月03日
    浏览(46)
  • 前端049_单点登录SSO_封装 Axios 与 Mock.js

    安装 Axios ,来向后台发送接口请求 安装 Axios 发送接口请求 创建 src/utils/request.js

    2024年02月08日
    浏览(99)
  • 【绿色版】Mysql下载、安装、配置与使用(保姆级教程)

    大家都知道,Mysql安装版的卸载过程非常繁琐,而且卸载不干净会出现许多问题,很容易让大家陷入重装系统的窘境。基于此,博主今天给大家分享绿色版Mysql的安装、配置与使用。 目录 一、Mysql安装、配置与使用 1、下载解压 2、创建、编辑配置文件 3、配置环境变量 4、初始

    2024年02月03日
    浏览(39)
  • 前端框架前置学习(3) AJAX原理 XMLHttpRequest,Promise,简易axios函数封装

    1.获取图片文件对象  // 文件选择元素-change改变事件 document.querySelector(\\\'.upload\\\').addEventListener(\\\'change\\\', e = {       // 1. 获取图片文件       console.log(e.target.files[0]) 2.使用FormData携带文件  // 2. 使用 FormData 携带图片文件       const fd = new FormData()       fd.append(\\\'img\\\', e.target.files[0

    2024年02月03日
    浏览(52)
  • vue前端使用Jenkins自动构建项目,保姆级教程

    1. 开始前的准备工作 在阿里云控台界面搜索 容器镜像服务 添加个人版的容器镜像服务 然后在服务器上安装docker使用下面两个脚本文件 创建一个脚本 install_before_docker_env.sh 创建第二个脚本 install_docker-new.sh 在服务根目录下创建一个 install 目录将两个脚本文件放入 cd 到 instal

    2024年02月05日
    浏览(56)
  • vite+ vue3(现有项目或者新项目)+electron打包教程,以及electron代码热重载页面(保姆级教程),一文带你走完全过程

      1.删掉type这个字段,不然会报错  2.然后加上\\\"main\\\": \\\"electron/main.js\\\",  3.在scripts字段中加入启动electron的命令:如下图 5.这时候你去打开控制台输入输入npm run start会得到一片空白,展示如下页面 1.因为现在监听的是vue打包后的dist文件夹中的index.html 2.我就不教你们怎么打开那个

    2024年02月11日
    浏览(101)
  • Vue3和TypeScript下基于Axios的二次封装教程

    学习如何在Vue3项目中使用TypeScript和Axios进行二次封装,实现更灵活的网络请求处理。详细教程包括拦截器设置和类型扩展。

    2024年02月05日
    浏览(119)
  • vue3【使用axios并封装axios请求】

    第一步:安装axios 第二步:编写请求文件 新建request.js 简单的axios封装,里面相关提示信息,自己可以引入element-plus去添加

    2024年02月04日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包