uniapp 雲函數批量導出功能實現及api方法封裝

目的： 只關注成功的返回，失敗的返回統一處理

步驟

|-common
|	|-api	api接口調用
|	|-css	公共樣式
|-http.js	封裝網絡請求

1. promise方法封裝uniCloud.callFunction雲函數請求方法

common目錄下的http.js

const get_label = (data)=> {	
    return new Promise((reslove, reject) => {
		uniCloud.callFunction({
			name: url,
			data: dataObj
		}).then((res) => {
			if (res.result.code === 200) {
				// .then
				reslove(res.result)
			} else {
				// catch
				reject(res.result)
			}
		}).catch((err) => {
			reject(err)
		})
	})
}
export default {
    get_label
}

在api目錄下創建list.js(測試方法可行性)

/* 所有的雲函數接口列表寫在這里 */
export const get_list = (data)=>{
    return new Promise((reslove, reject) => {
        reslove({'data':'請求成功'})
	})
}

綁定到根目錄的main.js上

import api from './common/api'
Vue.prototype.$api = api /*綁定到vue實例上*/

2.測試方法重寫

index.vue內調用 重寫

測試方法get_list

                this.$api.get_list().then((res)=>{
                    console.log(res)
                })

this.$api.get_label({
    name:"get_label"
}).then((res) => {
    const {
        data
    } = res
    console.log('標簽 ',data);
    this.tabList = data
    // 	console.log(this.tabList);
})

3. 創建http.js 作為方法調用(創建一個http的接口方法)

目的：為了將return 內的 Promise 提出作為公共部分

export default function $http(options){
    const {url,data} = options;
    return new Promise((reslove, reject) => {
		uniCloud.callFunction({
			name: url,/* 雲函數名稱 */
			data: data/* 傳遞的數據 */
		}).then((res) => {

			if (res.result.code === 200) {
				// .then
				reslove(res.result)
			} else {
				// catch
				reject(res.result)
			}

		}).catch((err) => {
			reject(err)
		})
	})
}

4.修改原先的list.js

方法： 引入http.js 將原先的返回值方法進行改造

import $http from './../http.js'
export const get_label = (data)=> {	
    return $http({
        url:'get_label',
        data
    })
}

/* 所有的雲函數接口列表寫在這里 */
export const get_list = (data)=>{
    return new Promise((reslove, reject) => {
        reslove({'data':'請求成功'})
	})
}

5.統一封裝雲函數請求，在list內統一調用

之后如果有多個雲函數只需要重復寫多個方法函數即可

import $http from './../http.js'
export const get_label = (data)=> {	
    return $http({
        url:'get_label',
        data
    })
}

6.由於有多個雲函數，需要批量的導出和引用，需要改寫index.js文件

原先只能導出一個雲函數（現在需要無論名稱是什么都可以全部導入導出）

//原先的===============
// import {get_label,get_list} from './list.js'

// export default{
//     get_label,
//     get_list
// }
//修改后的================
// 批量導出文件
const requireApi = require.context(
	// api 目錄的相對路徑
	'.',
	// 是否查詢子目錄
	false,
	// 查詢文件的一個后綴
	/.js$/
)

let module = {}
requireApi.keys().forEach((key,index)=>{
    //因為index為輸出的目錄，所以需要排除掉
	if(key === './index.js') return
	console.log(key);
    //對象合並
	Object.assign(module,requireApi(key))
})
console.log(module)
export default module

得到需要導出的格式

最終結果

在api內創建list.js進行調用

http.js

export default function $http(options) {
	const {
		url,
		data
	} = options
	const dataObj = {
		user_id: '5e76254858d922004d6c9cdc',
		...data
	}
	return new Promise((reslove, reject) => {
		uniCloud.callFunction({
			name: url,
			data: dataObj
		}).then((res) => {

			if (res.result.code === 200) {
				// .then
				reslove(res.result)
			} else {
				// catch
				reject(res.result)
			}

		}).catch((err) => {
			reject(err)
		})
	})
}

list.js

import $http from '../http.js'

export const get_label = (data) => {
	return $http({
		url: 'get_label',
		data
	})
}

export const get_list = (data) => {
	return $http({
		url: 'get_list',
		data
	})
}

export const update_like = (data) => {
	return $http({
		url: 'update_like',
		data
	})
}
export const get_search = (data) => {
	return $http({
		url: 'get_search',
		data
	})
}

export const update_label = (data) => {
	return $http({
		url: 'update_label',
		data
	})
}

export const get_detail = (data) => {
	return $http({
		url: "get_detail",
		data
	})
}

export const update_comment = (data) => {
	return $http({
		url: "update_comment",
		data
	})
}
export const get_comments = (data) => {
	return $http({
		url: 'get_comments',
		data
	})
}

export const update_author = (data) =>{
	return $http({
		url: 'update_author',
		data
	})
}

export const update_thumbsup =  (data) =>{
	return $http({
		url: 'update_thumbsup',
		data
	}) 
}

index.js

// 批量導出文件
const requireApi = require.context(
	// api 目錄的相對路徑
	'.',
	// 是否查詢子目錄
	false,
	// 查詢文件的一個后綴
	/.js$/
)

let module = {}
requireApi.keys().forEach((key,index)=>{
	if(key === './index.js') return
	console.log(key);
	Object.assign(module,requireApi(key))
})

export default module

方法調用

				this.$api.get_label({
                        name:"get_label"
                    }).then((res) => {
					const {
						data
					} = res
					console.log('標簽 ',data);
					data.unshift({
						name:'全部'
					})
					this.tabList = data
					// 	console.log(this.tabList);
				})