[[425641]]

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

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

2、common目錄下創建 config,js、request.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> 

運行頁面

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

本文轉載自微信公眾號「IT技術分享社區」，可以通過以下二維碼關注。轉載本文請聯系IT技術分享社區公眾號。