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

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. } 
29. // https://qqlykm.cn/api/yan/gc.php 测试接口 
30. {"code":"200","msg":"success" , 
31.  "data": 
32.  {"Poetry":"千人之诺诺，不如一士之谔谔。", 
33.   "Poet":"null", 
34.   "Poem_title":"史记·商君列传"} 
35. } 

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

原文链接：https://mp.weixin.qq.com/s/t41pyip0zvNBHZsWfXj1Jg