在上一篇文章里面,写到使用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请求相关推荐

  1. uni-app微信小程序封装一个request请求接口

    在uniapp项目根目录里面新建一个文件 utils: 再新建一个api.js: //你的请求地址(线上或线下) const BASE_URL = 'https://www.baidu.com/' e ...

  2. python封装一个requests请求

    python封装一个requests请求 更新:https://blog.csdn.net/qq_42846555/article/details/126401051 from requests im ...

  3. 微信小程序设置全局请求URL 封装wx.request请求

    app.js: App({//设置全局请求URLglobalData:{URL: 'https://www.oyhdo.com',},/*** 封装wx.request请求* method: 请求方式 ...

  4. uni app 调用网络打印机_uni-app 的使用体验总结

    [实践] uni-app 的使用总结 最近使用 uni-app 的感受. 使用体验 没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和 小程序结合的感觉.写类似小程序的标签,有着小程 ...

  5. 解决部分app调用摄像头失败(只有一个usbcamera)这里只是一部分(参考)

    rk3399 android 7.1 产品上只有一个摄像头 但是第三方app调用的时候分前后摄像头调用,有调用两个摄像头的操作 所以就是强行指定唯一的cameraid

  6. uni app 调用网络打印机_一套代码,七端运行-uni-app

    为什么要使用uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 同时在别的方面它也有很大优 ...

  7. uni app 调用网络打印机_前端工程师 | 原生小程序坑点:uni-app到底好用在哪里?...

    要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图 系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...

  8. Android入门:封装一个HTTP请求的辅助类

    前面的文章中,我们曾经实现了一个HTTP的GET 和 POST 请求: 此处我封装了一个HTTP的get和post的辅助类,能够更好的使用: 类名:HttpRequestUtil 提供了如下功能: ( ...

  9. ios调用第三方程序打开文件,以及第三方调用自己的APP打开文件

    一.自己的APP调用第三方打开文件 主要是使用 UIDocumentInteractionController 类 并实现 UIDocumentInteractionControllerDelegat ...

最新文章

  1. 检测硬盘使用时长_如何检测硬盘问题
  2. html设置flash满屏,在网页中实现flash全屏的几种方法
  3. Hibernate的懒加载问题
  4. libvirt- Virsh 所有命令详单
  5. 开源在线考试系统推荐-支持web端和小程序
  6. 2017.9.13 不等式组 思考记录
  7. 修改mysql_MySQL UPDATE:修改数据(更新数据)
  8. jsp中运用html语言,JSP技术-第2章 HTML语言.doc
  9. AxureRP8实战手册
  10. 豆瓣fm android,豆瓣 FM
  11. C++析构函数定义和使用
  12. java人民币金额大写_[求助]用java实现整数转换为人民币金额大写的功能
  13. 【整理】Android-Recovery Mode(recover模式详解)
  14. Java 给Word不同页面设置不同背景
  15. js实现图片虚化_Web前端之高斯模糊图片记
  16. 韭菜简史:快招加盟的致富骗局
  17. Android 自定义下拉列表
  18. 收藏!5款超级好用的小工具推荐,各个都是同类软件中的翘楚
  19. 使用w3c生成xml文件
  20. 老年食堂:让社区生活充满“幸福滋味”

热门文章

  1. 【Spring】Unable to start ServletWebServerApplicationContext due to miss ServletWebServerFactory bean
  2. 【kafka】消息队列设计精要
  3. 【Elasticsearch】实用BM25 -第1部分: shard 如何影响Elasticsearch中的相关性评分
  4. 【clickhouse】clickhouse INSERT INTO 语句
  5. 【Flink】flink1.11报错No ExecutorFactory found to execute the application
  6. 【SpringBoot】Spring boot 多数据源 no transaction is in progress EntityManager flush
  7. 【Flink】Flink 与数据库的集成最佳实践 【视频笔记】
  8. Siddhi : Siddhi maven 仓库
  9. 【Kafka】【未解决】kafka反序列化数据报错jackson2 JsonParseException: Invalid UTF-8 middle byte 0xc0
  10. Spring boot 源码:Bean的Scope