uni-app之请求封装（三）

gitHub源码

开始进行交互了 我们在做vue或者react 进行前后端的交互时 都会进行亲求的封装 那么 uni-app也是一样的 如果我们不封装  频繁的写 那太麻烦了 话不多说 开始撸

第一步

先建立两个文件夹api和utils

先看下request.js  里面放一个promise

export default function $http(options){
	const { url, data } = options
	return new Promise((resove,reject)=>{
		uniCloud.callFunction({
			name:url,
			data
		}).then((res)=>{
			resove(res.result)
		}).catch(err=>{
			reject(err)
		})
	})
}

在看下getTab.js 里面放上我们的云函数请求

import $http from "../../utils/request"
export const getTab = (data)=>{
	return new $http({
		url:'tabBar',
		data
	})
}

在看下index.js  进行云函数接口的整合

const requireApi = require.context(".",false,/.js$/)
const module ={}
requireApi.keys().map((key,index)=>{
	if(key==="./index.js") return
	Object.assign(module,requireApi(key))
})
export default module

在main.js进行引入 然后全局注册在vue实例里面

import Vue from 'vue'
import App from './App'
import getTab from "./common/api"
Vue.config.productionTip = false

App.mpType = 'app'
Vue.prototype.$api = getTab
const app = new Vue({
    ...App
})
app.$mount()

页面使用

methods: {
	getTabList() {
		this.$api.getTab({name:'tabBar'}).then(res=>{
			this.dataList = res.data
		})
	}
},

还在持续学习中 最终会放到gitHub上 想看的可以关注  手上现在也有套学习视频 想要的可以联系我 qq:1254845399