文章目录
- 十一、请求方法封装
- 实现流程
- 一、定义公共的 http 请求方法
- 二、创建接口文件进行公共方法的调用
- 三、方法挂载到 Vue 原型上,供每个界面进行使用
- 四、页面/组件内部进行方法的调用
十一、请求方法封装
为了减少代码的冗余,优化代码的可读性,及可维护性,进行请求方法的封装
实现流程
一、定义公共的 http 请求方法
- 创建 http.js 文件,导出一个封装好的 promise 对象(内部进行 uniCloud 调用)
export default ({ name, data = {} }) => {
//name云函数的名字 data参数据
/* 导出pormise对象 */
return new Promise((resolve, reject) => {
//开启loading弹窗
uni.showLoading({})
uniCloud.callFunction({
name,
success({ result }) {
//成功的状态
if (result.code === 0) {
//能够拿到数据值
resolve(result.data)
} else {
//提示框,一般是后端没有查询到数据值
uni.showToast({ icon: 'none', title: result.msg })
}
},
fail(err) {
//请求失败,一般是网络的原因,后端的错误
reject(err)
},
complete() {
//完成的状态
//关闭loading弹窗
uni.hideLoading()
},
})
})
}
二、创建接口文件进行公共方法的调用
三、方法挂载到 Vue 原型上,供每个界面进行使用
- 使用 webpacck 的 require.context 方法对所有的请求函数收集
require.context 是什么?
一个 webpack 的 api,通过执行 require.context 函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个 api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用 import 导入模块
/* 批量进行文件导出 */
// . =>API目录的相对路径
// true => 是否查询子目录
// /.js/ => 正则:需要查询的文件的后缀名
const requireApi = require.context(".", true, /.js$/);
console.log(requireApi.keys()); //如下图38
let module = {};
//requireApi.keys 所有请求页面路径的数组
requireApi.keys().forEach((key, index) => {
//如果等本身就返回
if (key === "./index.js") return;
Object.assign(module, requireApi(key));
//requireApi(key) 是每页面请求方法的名称对象--//如下图39
});
export default module;
- main.js 进行方法挂载
import module from './ajax/api/index.js'
Vue.prototype.$http = module;
- 例子:
import App from "./App";
import module from "@/ajax/api/index.js";
Vue.prototype.$http = module;
// #ifndef VUE3
import Vue from "vue";
Vue.config.productionTip = false;
App.mpType = "app";
const app = new Vue({
...App,
});
app.$mount();
// #endif
// #ifdef VUE3
import { createSSRApp } from "vue";
export function createApp() {
const app = createSSRApp(App);
return {
app,
};
}
// #endif
四、页面/组件内部进行方法的调用
async _intiLabelList() {
const labelList = await this.$http.get_label_list()
this.labelList = labelList
}