【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结尾的文件

<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>