uni-app请求方法封装⑦

文章目录

十一、请求方法封装

为了减少代码的冗余,优化代码的可读性,及可维护性,进行请求方法的封装

实现流程

一、定义公共的 http 请求方法
  1. 创建 http.js 文件,导出一个封装好的 promise 对象(内部进行 uniCloud 调用)
js 复制代码
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 原型上,供每个界面进行使用
  1. 使用 webpacck 的 require.context 方法对所有的请求函数收集

require.context 是什么?

一个 webpack 的 api,通过执行 require.context 函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个 api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用 import 导入模块

js 复制代码
/* 批量进行文件导出 */
// . =>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;


  1. main.js 进行方法挂载
react 复制代码
import module from './ajax/api/index.js'
Vue.prototype.$http = module;
  • 例子:
js 复制代码
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
四、页面/组件内部进行方法的调用
js 复制代码
async _intiLabelList() {
    const labelList = await this.$http.get_label_list()
    this.labelList = labelList
}
相关推荐
2501_915918412 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui520863 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
清风细雨_林木木8 小时前
uni-app 和 uni-app x 的区别
uni-app
iOS阿玮8 小时前
期待iOS开发者加入,共同抵制“苹果税”反垄断招募令!
uni-app·app·apple
普通网友8 小时前
支持二次开发的代练App源码:订单管理、代练监控、安全护航功能齐全,一站式解决代练护航平台源码(PHP+ Uni-app)
安全·uni-app·php
蜕变菜鸟8 小时前
uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。
uni-app
吴传逞2 天前
记一次uniapp微信小程序开发scss变量失效的问题
微信小程序·uni-app·scss
2501_915921432 天前
小团队如何高效完成 uni-app iOS 上架,从分工到工具组合的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
2501_916008892 天前
uni-app iOS 文件管理与 itools 配合实战,多工具协作的完整流程
android·ios·小程序·https·uni-app·iphone·webview
!win !2 天前
uni-app项目Tabbar实现切换icon动效
小程序·uni-app