完善uview的api请求封装和公共js

JDengid · JDengid · commit a34ef2c71475 · 2021-09-22T11:47:08.000+08:00
diff --git a/uniapp_uview/common/config.js b/uniapp_uview/common/config.js
@@ -0,0 +1,17 @@
+const mode = 'devOnline'; //devLocal：本地测试、devOnline：线上测试、production：生产环境
+let ROOTPATH = '';  //域名
+switch (mode) {
+	case 'devLocal':
+		ROOTPATH = "http://192.168.2.5:61111"
+		break;
+	case 'devOnline':
+		ROOTPATH = "https://xxxxx.cn"
+		break;
+	case 'production':
+		ROOTPATH = "https://xxxxx.cn"
+		break;
+	default:
+		throw new Error('未配置环境');
+		console.log(`未配置环境`);
+}
+export { ROOTPATH }
diff --git a/uniapp_uview/common/const.js b/uniapp_uview/common/const.js
@@ -0,0 +1,4 @@
+/*
+* 公用变量
+*
+*/
diff --git a/uniapp_uview/common/http.api.js b/uniapp_uview/common/http.api.js
@@ -0,0 +1,25 @@
+//api集合
+let apiApp = {
+	login: '/api/login',
+	getInfo: '/777/777/index',
+}
+let apiHome = {
+	hotSearchUrl: '/777/77/hot_search'
+}
+
+// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作
+const install = (Vue, vm) => {
+	
+	// 此处没有使用传入的params参数
+	let getSearch = (params = {}) => vm.$u.get(apiHome.hotSearchUrl, params);
+	// 此处使用了传入的params参数，一切自定义即可
+	
+	let getInfo = (params = {}) => vm.$u.post(apiApp.getInfo, params);
+	
+	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
+	vm.$u.api = {getSearch, getInfo};
+}
+
+export default {
+	install
+}
diff --git a/uniapp_uview/common/http.interceptor.js b/uniapp_uview/common/http.interceptor.js
@@ -0,0 +1,74 @@
+import { ROOTPATH as baseUrl } from "@/common/config.js"
+
+// 这里的Vue为Vue对象(非创建出来的实例)，vm为main.js中“Vue.use(httpInterceptor, app)”这一句的第二个参数，
+// 为一个Vue的实例，也即每个页面的"this"
+// 如果需要了解这个install方法是什么，请移步：https://uviewui.com/components/vueUse.html
+const install = (Vue, vm) => {
+	// 此为自定义配置参数，具体参数见上方说明
+	Vue.prototype.$u.http.setConfig({
+		baseUrl,
+		showLoading: true, // 是否显示请求中的loading
+		loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
+		loadingText: '加载中', // 请求loading中的文字提示
+		loadingTime: 800,
+		originalData: false, // 是否在拦截器中返回服务端的原始数据
+		// 设置自定义头部content-type
+		header: {
+			'content-type': 'application/json;charset=UTF-8'
+		}
+	});
+
+	// 请求拦截部分，如配置，每次请求前都会执行
+	Vue.prototype.$u.http.interceptor.request = (config) => {
+		console.log('config', config)
+		// 引用token
+		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
+		// 见：https://uviewui.com/components/globalVariable.html
+		// config.header.token = vm.token;
+
+		// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
+		// config.header.token = vm.$store.state.token;
+
+		// 方式三，如果token放在了globalData，通过getApp().globalData获取
+		// config.header.token = getApp().globalData.username;
+
+		// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
+		// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
+		// const token = uni.getStorageSync('token');
+		// config.header.token = token;
+		config.header.Token = 'xxxxxx';
+
+		// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
+		if (config.url == '/user/login') config.header.noToken = true;
+		// 最后需要将config进行return
+		return config;
+		// 如果return一个false值，则会取消本次请求
+		// if(config.url == '/user/rest') return false; // 取消某次请求
+	}
+
+	// 响应拦截，如配置，每次请求结束都会执行本方法
+	Vue.prototype.$u.http.interceptor.response = (res) => {
+		if (res.code == 200) {
+			// res为服务端返回值，可能有code，result等字段
+			// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
+			// 如果配置了originalData为true，请留意这里的返回值
+			return res.result;
+		} else if (res.code == 201) {
+			// 假设201为token失效，这里跳转登录
+			vm.$u.toast('验证失败，请重新登录');
+			setTimeout(() => {
+				// 此为uView的方法，详见路由相关文档
+				vm.$u.route('/pages/user/login')
+			}, 1500)
+			return false;
+		} else {
+			// 如果返回false，则会调用Promise的reject回调，
+			// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
+			return false;
+		}
+	}
+}
+
+export default {
+	install
+}
diff --git a/uniapp_uview/common/util.js b/uniapp_uview/common/util.js
@@ -0,0 +1,5 @@
+/*
+* 公共方法
+*
+*/
+
diff --git a/uniapp_uview/main.js b/uniapp_uview/main.js
@@ -15,4 +15,14 @@ const app = new Vue({
 	store,
     ...App
 })
+
+// http拦截器，此为需要加入的内容
+import httpInterceptor from '@/common/http.interceptor.js'
+// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
+Vue.use(httpInterceptor, app)
+
+// http接口API集中管理引入部分
+import httpApi from '@/common/http.api.js'
+Vue.use(httpApi, app)
+
 app.$mount()
diff --git a/uniapp_uview/pages/index/index.vue b/uniapp_uview/pages/index/index.vue
@@ -21,6 +21,12 @@
 		onLoad() {
 			this.$u.vuex('vuex_user.name', '诗圣');
 			this.$u.toast('Hello uView!');
+			// 调用getSearch接口
+			this.$u.api.getSearch({
+				id: 777
+			}).then(res => {
+				console.log(res);
+			})
 		},
 		methods: {
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +/*
 +* 公用变量
 +*
 +*/