山东大学项目实训（二）—— 请求封装和双TOKEN机制

工欲善其事必先利其器

在实现前端页面和功能之前， 首先需要确保我们（小程序前端）向服务器发起的网络请求能够得到确认和响应，不然一切都是徒劳。 因此，通过 uniapp 官方文档可以看到 —— 官方向我们提供了网络请求的API 。见下图：
经测试（为了体现测试的真实性，并没有在本机上进行测试，而是购买了一台服务器，将后端测试代码和数据库中的数据部署在购买的服务器中，访问的BASE_URL是服务器的外网IP:端口号）
使用官方文档提供的API能够得到我们服务器的确认和响应。

请求封装

但是，官方文档提供的API并不能满足我们的需求 —— 基于前期的需求分析，为了保证用户数据的安全性和用户体验的良好性，团队决定采取并使用 “双TOKEN” 的网络请求机制。这一机制决定了我们需要对请求进行拦截 —— 在请求头上添加TOKEN。 故需要对官方文档提供的API进行再次封装以满足我们的需求。经结合相关资料，对uniapp网络请求进行了封装。详细介绍在代码中的注释上。

/**
 * 通用uni-app网络请求
 * 基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截
 */

export default {
   
	// 请求配置中心
	config: {
   
	    // 服务器url: "http://外网IP地址:端口号/"  
	    // 本机url: "http://localhost:8080/"
		baseUrl: "http://xxx.xxx.xxx.xxx:xxx/", 
		// 请求头
		header: {
   
			'Content-Type': 'application/json;charset=UTF-8',
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		// 请求携带的数据
		data: {
   },
		// 请求默认方法为GET请求
		method: "GET",
		// 数据类型为JSON
		dataType: "json",
		/* 如设为json，会对返回的数据做一次 JSON.parse */
		responseType: "text",
		// 请求成功后调用的方法
		success() {
   },
		// 请求失败后调用的方法
		fail() {
   },
		// 请求完成时调用的方法
		complete() {
   }
	},
	// 请求和响应拦截器
	interceptor: {
   
		request: null,
		response: null
	},
	// 封装官方文档提供的API：uni.request
	request(options) {
   
		if (!options) {
   
			options = {
   }
		}
		// 请求配置参数
		options.baseUrl = options.baseUrl || this.config.baseUrl
		options.dataType = options.dataType || this.config.dataType
		options.url