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

原文地址:https://blog.csdn.net/PolarisWay/article/details/134641292

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

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

相关文章

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包