uniapp作為開發移動端的前端框架，目前國內是非常流行的，使用HbuilderX開發工具基于uniapp框架開發的系統可以方便的轉換為小程序、APP等移動端程序，大大降低了移動開發的成本。網絡請求更是每個前端項目必備的技術，所以有必要進行前端網絡請求的封裝，今天小編給大家介紹一下，如何基于uniapp實現網絡請求的簡單封裝，希望對新手能有所幫助！

1、首先安裝HbuilderX開發工具創建一個uniapp的項目。

2、common目錄下創建 config,js、request.js 文件

config,js

const BASE_URL="https://qqlykm.cn/api/yan/gc.php";//隨機查詢古詩接口

request.js

import {GlobeConfig} from 'config.js'
export const request = (options)=>{return new Promise((resolve, reject)=>{// 封裝主體：網絡請求uni.request({				url: "/api"+options.url,data: options.data || {},		// 默認值GET，如果有需要改動，在options中設定其他的method值method: options.method || 'GET',      success: (res) => {console.log(res.data);		// 控制臺顯示數據信息resolve(res)},fail: (err) =>{// 頁面中彈框顯示失敗uni.showToast({title: '請求接口失敗'})// 返回錯誤消息reject(err)},catch:(e)=>{console.log(e);}})})
}

// https://qqlykm.cn/api/yan/gc.php 測試接口
{"code":"200","msg":"success" ,"data":{"Poetry":"千人之諾諾，不如一士之諤諤。","Poet":"null","Poem_title":"史記·商君列傳"}
}

3、main.js 導入封裝的網絡請求

//導入封裝的網絡請求
import {request} from 'common/request.js'
Vue.prototype.$request = request

4、新建測試 demo.vue

<template><view class="content">	<view class="article-meta"><text class="">{{Poem_title}}</text>				 </view><view><text class="">作者：{{Poet}}</text></view><view class="article-content"><view>{{Poetry}}</view></view></view></template><script>export default {data() {return {Poem_title: "",Poet: "",Poetry: ""}},onLoad() {this.initData();},methods: {async initData() {debugger;const res = await this.$request({url: '', //請求的url默認可以寫在配置文件里面data: {// 接口的請求參數，可能為空}})// 給頁面的數據賦值	if (res.data.msg == "success") {this.Poem_title = res.data.data.Poem_title;this.Poet = res.data.data.Poet=="null" ? "佚名": res.data.data.Poet;this.Poetry = res.data.data.Poetry;}}}}
</script><style lang="scss" scoped>
</style>

運行頁面

IT技術分享社區

個人博客網站：https://programmerblog.xyz

文章推薦程序員效率：畫流程圖常用的工具程序員效率：整理常用的在線筆記軟件遠程辦公：常用的遠程協助軟件，你都知道嗎？51單片機程序下載、ISP及串口基礎知識硬件：斷路器、接觸器、繼電器基礎知識