文章目錄

• • • • • 一、前端
        • • 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 封装网络请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。