js公共方法的封装并全局挂载

一、封装js

在项目目录的common下新建一个js文件

msgcfg.js

import commonApi from "@/api/common/apiMethod.js";

function getMsg(msgCode){
	return new Promise((resolve, reject) => {
		commonApi.getAppVersion(msgCode).then(res => {
			if (res.data.code === "0") {
				var data = res.data.data ? res.data.data : {}
				if(data.versionName){
					resolve(data.versionName);
				}
			}
		}).catch(err => {
			reject(err)
		});
		
	})
}

export default {
	getMsg
}

这里我是用了封装的请求库的，用uni.request也是一样的：

function getMsg2(msgCode) {
	return new Promise((resolve, reject) => {
		uni.request({ 
			url : '',
			method : "POST",
			data : msgCode,
			success: (res) => {
				resolve(res.data.data.versionName);
			},
			fail:(err)=>{
				reject('err')
			}
		})
	})
}

二、全局挂载

vue的全局挂载

三、使用

  async checkVersion(){
  		let msg =  await this.$msg.getMsg("ios")
    	console.log('msg.........',msg )
  }

这里使用async和await以及Promise保证数据的同步，这种适用于封装调用接口的js。

坑：Nvue文件无法使用main.js全局引入的文件

因为 .vue 和 .nvue 并不是一个规范，因此一些在 .vue 中适用的方案并不适用于 .nvue。 Vue 上挂载属性，不能在 .nvue 中使用。
这是nvue的一个弊端，暂时没找到办法解决。
替代的办法就是需要用的nvue页面单独引一下要用的js文件。

在nvue页面单独引入js文件：

在methods中定义一个方法：

async update(){
	console.log('msg.........', await msgcfg.getMsg('ios'))
}

按钮加个事件就可以了：

为什么用async… await…

因为方法里执行是异步的，接口还没有返回程序会继续往下执行，return会返回null。
为了解决这个问题，我尝试用回调，但回调带来的问题是使用上的不便，你需要在调用函数的时候用箭头函数去接收返回的值，这会让调用的地方多一层函数体嵌套：

import commonApi from "@/api/common/apiMethod.js";

export default function(platform, callback) {
	commonApi.getAppVersion(platform).then(res => {
		if (res.data.code === "0") {
			var data = res.data.data ? res.data.data : ""
			if(data){
				callback && callback(data.versionName);
			}
		}
	}).catch(err => {
		console.log(err);
	});
}

update(){
	msgcfg('ios',res => {
		console.log('msg.....',res)
	});
}

在封装的过程中，发现使用async… await… 用于等待一个异步方法执行完成，可以达到回调的效果，同时使用起来更加优雅