前端:Uniapp封装网络请求笔记

网络 通信技术
uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本。

[[425641]]

uniapp作为开发移动端的前端框架,目前国内是非常流行的,使用HbuilderX开发工具基于uniapp框架开发的系统可以方便的转换为小程序、APP等移动端程序,大大降低了移动开发的成本。网络请求更是每个前端项目必备的技术,所以有必要进行前端网络请求的封装,今天小编给大家介绍一下,如何基于uniapp实现网络请求的简单封装,希望对新手能有所帮助!

1、首先安装HbuilderX开发工具创建一个uniapp的项目。

2、common目录下创建 config,js、request.js 文件

  1. const BASE_URL="https://qqlykm.cn/api/yan/gc.php";//随机查询古诗接口 

request.js

  1. import {GlobeConfig} from 'config.js' 
  2. export const request = (options)=>{ 
  3.     return new Promise((resolve, reject)=>{ 
  4.         // 封装主体:网络请求 
  5.         uni.request({                
  6.             url: "/api"+options.url, 
  7.             data: options.data || {},        
  8.       // 默认值GET,如果有需要改动,在options中设定其他的method值 
  9.             method: options.method || 'GET',       
  10.             success: (res) => { 
  11.                 console.log(res.data);      // 控制台显示数据信息 
  12.                 resolve(res) 
  13.             }, 
  14.             fail: (err) =>{ 
  15.                 // 页面中弹框显示失败 
  16.                 uni.showToast({ 
  17.                     title: '请求接口失败' 
  18.                 }) 
  19.                 // 返回错误消息 
  20.                 reject(err) 
  21.             }, 
  22.             catch:(e)=>{ 
  23.                 console.log(e); 
  24.             } 
  25.         }) 
  26.     } 
  27.     ) 
  28. // https://qqlykm.cn/api/yan/gc.php 测试接口 
  29. {"code":"200","msg":"success" , 
  30.  "data"
  31.  {"Poetry":"千人之诺诺,不如一士之谔谔。"
  32.   "Poet":"null"
  33.   "Poem_title":"史记·商君列传"

3、main.js 导入封装的网络请求

  1. //导入封装的网络请求 
  2. import {request} from 'common/request.js' 
  3. Vue.prototype.$request = request 

4、新建测试 demo.vue

  1. <template> 
  2.     <view class="content">   
  3.         <view class="article-meta"
  4.           <text class="">{{Poem_title}}</text>                
  5.         </view
  6.         <view
  7.             <text class="">作者:{{Poet}}</text> 
  8.         </view
  9.         <view class="article-content"
  10.           <view>{{Poetry}}</view
  11.         </view
  12.     </view
  13.  
  14. </template> 
  15.  
  16. <script> 
  17.     export default { 
  18.         data() { 
  19.             return { 
  20.                 Poem_title: ""
  21.                 Poet: ""
  22.                 Poetry: "" 
  23.             } 
  24.         }, 
  25.         onLoad() { 
  26.             this.initData(); 
  27.         }, 
  28.  
  29.         methods: { 
  30.             async initData() { 
  31.                 debugger; 
  32.                 const res = await this.$request({ 
  33.                     url: '', //请求的url默认可以写在配置文件里面 
  34.                     data: { 
  35.                         // 接口的请求参数,可能为空 
  36.                     } 
  37.                 }) 
  38.                 // 给页面的数据赋值  
  39.                 if (res.data.msg == "success") { 
  40.                     this.Poem_title = res.data.data.Poem_title; 
  41.                     this.Poet = res.data.data.Poet=="null" ? "佚名": res.data.data.Poet; 
  42.                     this.Poetry = res.data.data.Poetry; 
  43.                 } 
  44.  
  45.             } 
  46.         } 
  47.     } 
  48. </script> 
  49.  
  50. <style lang="scss" scoped> 
  51. </style> 

 

运行页面

个人博客网站:https://programmerblog.xyz

本文转载自微信公众号「IT技术分享社区」,可以通过以下二维码关注。转载本文请联系IT技术分享社区公众号。

 

责任编辑:武晓燕 来源: IT技术分享社区
相关推荐

2021-10-07 09:03:44

Uniapp封装组件

2022-03-02 15:31:32

架构网络请求代码

2019-03-28 11:00:37

前端网络请求开发

2015-06-02 09:51:40

iOS网络请求封装接口

2021-07-27 14:50:15

axiosHTTP前端

2023-10-24 07:08:04

命令模式设计模式命令对象

2020-11-09 11:10:56

前端api缓存

2011-08-16 15:06:43

IOS开发异步请求

2009-08-24 14:30:49

C# WMI封装

2022-01-28 14:20:53

前端代码中断

2021-11-19 07:54:59

Axios网络源码

2022-04-10 10:42:44

CSS前端前端布局

2023-04-10 15:14:03

2017-05-25 09:45:35

2021-12-29 22:29:10

JavaScript前端数组

2021-11-03 09:33:51

网络私有请求

2011-08-01 13:57:20

iPhone 网络

2017-04-18 21:54:27

iOSWireShark网络请求

2022-06-07 08:59:58

hookuseRequestReact 项目

2022-04-26 10:47:53

分配权限vuejs
点赞
收藏

51CTO技术栈公众号