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

也想出现在这里？点击联系我~

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

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

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

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

request.js

1. import{GlobeConfig}from'config.js'
2. exportconstrequest=(options)=>{
3. returnnewPromise((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. <viewclass="content">
3. <viewclass="article-meta">
4. <textclass="">{{Poem_title}}</text>
5. </view>
6. <view>
7. <textclass="">作者：{{Poet}}</text>
8. </view>
9. <viewclass="article-content">
10. <view>{{Poetry}}</view>
11. </view>
12. </view>
14. </template>
16. <script>
17. exportdefault{
18. data(){
19. return{
20. Poem_title:"",
21. Poet:"",
22. Poetry:""
23. }
24. },
25. onLoad(){
26. this.initData();
27. },
29. methods:{
30. asyncinitData(){
31. debugger;
32. constres=awaitthis.$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. }
45. }
46. }
47. }
48. </script>
50. <stylelang="scss"scoped>
51. </style>

运行页面

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

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