uniapp 封装网络请求

文章目录

一、前端
- 1. 封装网络请求
- 2. 封装模块请求方法
二、后端
- 2.1. 返回对象
- 2.2. 热搜接口
三、微信模拟请求
- 3.1. Network
- 3.2. Console

一、前端

1. 封装网络请求

创建 utils 文件夹
创建 request.js ，封装请求对象

// const BASE_URL = 'https://api.imooc-blog.lgdsunday.club/api';
const BASE_URL = 'http://127.0.0.1:8080';
function request({ url, data, method }) {return new Promise((resolve, reject) => {// 发起网络请求uni.request({url: BASE_URL + url,data,method,success: ({ data }) => {// 响应成功，获取数据，解析数据if (data.success) {resolve(data);} else {// 响应失败，给用户提示uni.showToast({title: data.message,icon: 'none',mask: true,duration: 3000,});reject(data.message);}},fail: (error) => {reject(error);},complete: () => {// 关闭加载uni.hideLoading();},});});
}export default request;

后端需要按照前的接收的对象，封装后端返回的对象

2. 封装模块请求方法

原则：每个模块都有自己的请求管理api

创建 api 文件夹
创建 hot 文件，封装 hot 相关的请求方法
hot.js

import request from '../utils/request';export function getHotTabs() {return request({url: '/hot/tabs'});
}

数据列表

<template><view class="hot-container"><view v-for="(item, index) in tabData" :key="index">{{ item.label }} - {{ index }}</view></view>
</template><script>
import { getHotTabs } from 'api/hot';
export default {data() {return {tabData: [],};},// 组件实例配置完成，但是DOM尚未渲染，进行网络请求，配置响应数据created() {this.loadHotTabs();},methods: {/*** 获取热搜标题数据*/async loadHotTabs() {// uniapp 支持 async awaitconst  res= await getHotTabs();this.tabData = res.content;console.log('res', res.content);},},
};
</script><style lang="scss"></style>

二、后端

2.1. 返回对象

package com.gblfy.wx.miniapp.vo;/*** 返回封装对象** @author gblfy* @date 2022-01-02*/
public class ResponseDto<T> {/*** 业务上的成功或失败*/private boolean success = true;/*** 返回码*/private String code;/*** 返回信息*/private String message;/*** 返回泛型数据，自定义类型*/private T content;public String getCode() {return code;}public void setCode(String code) {this.code = code;}public boolean getSuccess() {return success;}public void setSuccess(boolean success) {this.success = success;}public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public T getContent() {return content;}public void setContent(T content) {this.content = content;}@Overridepublic String toString() {final StringBuffer sb = new StringBuffer("ResponseDto{");sb.append("success=").append(success);sb.append(", code='").append(code).append('\'');sb.append(", message='").append(message).append('\'');sb.append(", content=").append(content);sb.append('}');return sb.toString();}
}

2.2. 热搜接口

package com.gblfy.wx.miniapp.controller;import com.gblfy.wx.miniapp.vo.ResponseDto;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** 热搜列表用于测试前后端数据交互** @author gblfy* @date 2022-01-02*/
@RestController
public class HotController {@GetMapping("/hot/tabs")public ResponseDto hotList() {Map<String, Object> map = new HashMap<>();map.put("id", 1);map.put("label", "热榜");Map<String, Object> map2 = new HashMap<>();map2.put("id", 2);map2.put("label", "热榜2");Map<String, Object> map3 = new HashMap<>();map3.put("id", 3);map3.put("label", "热榜3");Map<String, Object> map4 = new HashMap<>();map4.put("id", 4);map4.put("label", "热榜4");Map<String, Object> map5 = new HashMap<>();map5.put("id", 5);map5.put("label", "热榜5");List<Map<String, Object>> list = new ArrayList<>();list.add(map);list.add(map2);list.add(map3);list.add(map4);list.add(map5);ResponseDto dto = new ResponseDto();dto.setContent(list);return dto;}
}

三、微信模拟请求

3.1. Network

3.2. Console

uniapp 封装网络请求相关推荐

前端：uniapp封装网络请求笔记
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序.APP等移动端程序,大大降低了移动开发的成本.网络请求更 ...
uniapp封装网络请求_八张图带你走进“通过一个完美请求封装一个网络模块”
本文提供视频课程讲解,需要的小伙伴可以点赞+私信''网络模块''前往领取学习大纲 1.网络模块在应用中的地位 1.1当今占统治地位的网络组件 OKHttp OkHttp 是一个相对成熟的解决方案,据 ...
App 组件化/模块化之路——如何封装网络请求框架
App 组件化/模块化之路--如何封装网络请求框架在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...
微信小程序教学第二章（含视频）：小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据...
§ 封装网络请求及 mock 数据本文配套视频地址: v.qq.com/x/page/i055- 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具上一节中,我们对 index.j ...
afn访问本地html,Swift利用AFN实现封装网络请求详解
前言相信大家都知道,我们一般在一个项目中,网络请求都封装成一个单例,以确保整个项目的网络请求 Session 是同一个. 单例模式定义:一个类有且仅有一个实例,并且自行实例化向整个系统提供,下面话不 ...
Android中使用Kotlin协程代替RxJava封装网络请求
现在的Android项目普遍使用Retrofit+RxJava的组合实现网络接口请求与数据的展现.这一功能通过Kotlin语言的协程功能也可以很方便的实现. 相比较而言,RxJava功能过于强大,如果 ...
小程序中封装ajax请求,如何在微信小程序中封装网络请求
如何在微信小程序中封装网络请求发布时间:2021-05-11 16:59:36 来源:亿速云阅读:95 作者:Leah 这期内容当中小编将会给大家带来有关如何在微信小程序中封装网络请求,文章内容丰 ...
android封装网络请求界面,轻松搞定 android MVP 架构、okHttp 网络模块封装的项目...
CommonMvp commonMvp 能做什么? 1.mvp 实现 model view presenter 业务和界面解耦 2.整合网络请求 3.简化网络调用流程 4.整合状态栏和标题栏实现 ...
Anroid-async-http封装网络请求框架源码分析
Android-async-http开源项目可以是我们轻松的获取网络数据或者向服务器发送数据,使用起来非常简单, 这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库, ...

uniapp 封装网络请求

文章目录

一、前端

1. 封装网络请求

2. 封装模块请求方法

二、后端

2.1. 返回对象

2.2. 热搜接口

三、微信模拟请求

3.1. Network

3.2. Console

uniapp 封装网络请求相关推荐

最新文章

热门文章