【Vue3.0实战逐步深入系列】基于axios+elementui实现一个动态可配置的投票功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。前面文章我们引入了elementui组件库，对我们的投票功能做了一下简单的美化，在经过一番的折腾后终于我们的投票模块在保证了功能的情况下，也变得美观了两全其美。然而一次只能做一个主题的投票显得太过单调，并且投票主题都是定死的，如果想换其它主题就不得不修改源码了。今天我们在前面投票功能的基础上进行一个扩展：投票还是投票，但是要让我们的投票主题动起来，并且一次能够进行多个主题的投票。

安装和配置axios

为了让我们的投票主题能够动起来（可配置），我们需要借助第三方库axios来从数据源中动态请求数据，这样以后想定义什么样的投票主题都可以，不用再去修改源码，这也才符合我们程序开发的规范。

• 首先安装第三方库axios。 运行命令：npm install axios
• 在项目的src目录下新建一个api目录用于存放后台API接口的请求方法
• 在api目录中新增一个http.js（文件名可以随便取）用于对axios进行二次封装
• axios默认配置都是全局的，为了能够兼容不同类型的后台接口，因此我们需要创建一个axios的实例进行单独配置，这样就不会影响全局和其它后台接口的配置
• 在http.js文件中导入axios， import axios from ‘axios’
• 调用axios的create方法创建axios的新的实例，该方法接收一个对象类型参数的，用于设置axios的一些头信息等
• 设置新实例的baseUrl为 ‘/’ 即根目录（作为参数传给create方法）
• 设置新实例的Content-Type为 ‘application/json’ （作为参数传给create方法）
• 调用axios.interceptors.response.use()设置响应拦截，在响应拦截中可以对响应数据做一些处理，比如：错误页面处理等。因为axios返回的响应会包含很多部分，我们在这里拦截目的就是只把数据部分返回出去
• 调用axios.interceptors.request.use()设置请求拦截，多用于处理验证一些请求信息，比如设置token等等，我们这里暂时用不到
• 最后将axios的新实例导出去供其它组件使用

import axios from 'axios'
//创建新的axios实例
let http = axios.create({
   
	baseURL:'/', // 设置baseURL
	headers:{
   //设置头信息
		"Content-Type":'application/json;charset=UTF-8'
	}
}