uni app 调用网络打印机_uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法https://www.jianshu.com/p/bc62c9e1beed
getList() { uni.request({url: "https://unidemo.dcloud.net.cn/api/news", method: 'get',dataType: 'json',success: (res) => {console.log(res.data);this.productList = res.data;}, });},
但是实际做项目的时候,会发现每个界面都要重复的写这些,看起来重复又啰嗦,心情就十分的不美丽了。
如果不封装那么我们会面临几个不方便的地方:
请求头每次网络请求都要单独设置
返回数据的正确性判断每次都要重复大量代码
返回数据格式有变化需要修改所有网络请求的地方
那么,该怎么使用uni-app封装一个request请求?步骤很简单,且听我一一道来。
注意:使用的例子,来自于这篇文章的相关的代码,修改封装请求是基于这个文章里面代码。进行相关的修改的。https://www.jianshu.com/p/bc62c9e1beed
步骤如下:
1、项目下新建common文件夹,再创建request.js文件
2、打开request.js文件,开始写封装的代码
思路很简单
定义域名:baseUrl;
定义方法:api;
通过promise异步请求,最后导出方法。
request.js参考代码如下
const baseUrl = 'https://unidemo.dcloud.net.cn'
const request = (url = '', date = {}, type = 'GET', header = {
}) => {return new Promise((resolve, reject) => {uni.request({method: type,url: baseUrl + url,data: date,header: header,dataType: 'json', }).then((response) => {setTimeout(function() {uni.hideLoading();}, 200);let [error, res] = response; resolve(res.data);}).catch(error => {let [err, res] = error;reject(err)})});
}
export default request
3、在main.js全局注册
import request from 'common/request.js'
Vue.prototype.$request = request
4、页面调用
this.$request('/api/news', {
// 传参参数名:参数值,如果没有,就不需要传
}).then(res => {
// 打印调用成功回调
console.log(res)
})
页面调用的index.vue
<template><view><uni-list v-for="(item,index) in productList" :key="index"><uni-list-item :title="item.author_name" :note="item.title"></uni-list-item></uni-list></view>
</template>
<script>import uniList from "@/components/uni-list/uni-list.vue"import uniListItem from "@/components/uni-list-item/uni-list-item.vue"export default {components: {uniList,uniListItem},data() {return {productList: [],};},onLoad() {this.getList();},methods: {getList() {this.$request('/api/news', {// 传参参数名:参数值,如果没有,就不需要传// "username": "john",// "key": this.searchValue}).then(res => {// 打印调用成功回调console.log(res)this.productList = res;})},}}
</script>
<style>
</style>
成功显示
好了,完结,散花,准备睡觉!!
各位路过的小哥哥,小姐姐,喜欢的就点个赞呗。
uni app 调用网络打印机_uni-app封装一个request请求相关推荐
- uni-app微信小程序封装一个request请求接口
在uniapp项目根目录里面新建一个文件 utils: 再新建一个api.js: //你的请求地址(线上或线下) const BASE_URL = 'https://www.baidu.com/' e ...
- python封装一个requests请求
python封装一个requests请求 更新:https://blog.csdn.net/qq_42846555/article/details/126401051 from requests im ...
- 微信小程序设置全局请求URL 封装wx.request请求
app.js: App({//设置全局请求URLglobalData:{URL: 'https://www.oyhdo.com',},/*** 封装wx.request请求* method: 请求方式 ...
- uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结 最近使用 uni-app 的感受. 使用体验 没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和 小程序结合的感觉.写类似小程序的标签,有着小程 ...
- 解决部分app调用摄像头失败(只有一个usbcamera)这里只是一部分(参考)
rk3399 android 7.1 产品上只有一个摄像头 但是第三方app调用的时候分前后摄像头调用,有调用两个摄像头的操作 所以就是强行指定唯一的cameraid
- uni app 调用网络打印机_一套代码,七端运行-uni-app
为什么要使用uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 同时在别的方面它也有很大优 ...
- uni app 调用网络打印机_前端工程师 | 原生小程序坑点:uni-app到底好用在哪里?...
要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图 系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...
- Android入门:封装一个HTTP请求的辅助类
前面的文章中,我们曾经实现了一个HTTP的GET 和 POST 请求: 此处我封装了一个HTTP的get和post的辅助类,能够更好的使用: 类名:HttpRequestUtil 提供了如下功能: ( ...
- ios调用第三方程序打开文件,以及第三方调用自己的APP打开文件
一.自己的APP调用第三方打开文件 主要是使用 UIDocumentInteractionController 类 并实现 UIDocumentInteractionControllerDelegat ...
最新文章
- 检测硬盘使用时长_如何检测硬盘问题
- html设置flash满屏,在网页中实现flash全屏的几种方法
- Hibernate的懒加载问题
- libvirt- Virsh 所有命令详单
- 开源在线考试系统推荐-支持web端和小程序
- 2017.9.13 不等式组 思考记录
- 修改mysql_MySQL UPDATE:修改数据(更新数据)
- jsp中运用html语言,JSP技术-第2章 HTML语言.doc
- AxureRP8实战手册
- 豆瓣fm android,豆瓣 FM
- C++析构函数定义和使用
- java人民币金额大写_[求助]用java实现整数转换为人民币金额大写的功能
- 【整理】Android-Recovery Mode(recover模式详解)
- Java 给Word不同页面设置不同背景
- js实现图片虚化_Web前端之高斯模糊图片记
- 韭菜简史:快招加盟的致富骗局
- Android 自定义下拉列表
- 收藏!5款超级好用的小工具推荐,各个都是同类软件中的翘楚
- 使用w3c生成xml文件
- 老年食堂:让社区生活充满“幸福滋味”
热门文章
- 【Spring】Unable to start ServletWebServerApplicationContext due to miss ServletWebServerFactory bean
- 【kafka】消息队列设计精要
- 【Elasticsearch】实用BM25 -第1部分: shard 如何影响Elasticsearch中的相关性评分
- 【clickhouse】clickhouse INSERT INTO 语句
- 【Flink】flink1.11报错No ExecutorFactory found to execute the application
- 【SpringBoot】Spring boot 多数据源 no transaction is in progress EntityManager flush
- 【Flink】Flink 与数据库的集成最佳实践 【视频笔记】
- Siddhi : Siddhi maven 仓库
- 【Kafka】【未解决】kafka反序列化数据报错jackson2 JsonParseException: Invalid UTF-8 middle byte 0xc0
- Spring boot 源码:Bean的Scope