uni-app网络请求、数据缓存实例详解

目录
  • 一、网络请求
    • 1.配置请求
      • 1.1 发送get请求
      • 1.2 发送POST请求
  • 二、数据缓存
    • 1.uni.setStorage(OBJECT)
    • 2.uni.setStorageSync(KEY,DATA)
    • 3.uni.getStorage(OBJECT)
    • 4.uni.getStorageSync(KEY)
    • 5.uni.removeStorage(OBJECT)
  • 总结

一、网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是：在小程序中网络相关的 API 在使用前需要配置域名白名单。

1.配置请求

以下为发送网络请求的基本配置，可根据接口请求数据方法的不同，以不同的方式请求数据。

// #ifdef H5
var baseURL = "/api"
// #endif
// #ifndef H5
var baseURL = "http://81.68.254.47/api"
// #endif
var request = function(options){
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseURL+options.url,
			method:options.method||'GET',
			data:options.data||{},
			dataType:options.dataType||'json',
			success: (res) => {
				resolve(res.data)
			},
			fail: (err) => {
				reject(err)
			}
		})
	})
}
export default request

1.1 发送get请求

// 引入request请求方法
import request from '../utils/request.js';

// 请求首页基础数据的方法
export const  getHome = ( )=>{
	return request({
		url:'/index_category/data'
	})
}

1.2 发送POST请求

// 引入request请求方法
import request from '../utils/request.js';

// 获取首页指定分类下的分页数据
export const  getChoose = ({title,page,all,sale_count,min_price})=>{
	return request({
		url:'/goods/search',
		method:'POST',
		data:{title,page,all,sale_count,min_price}
	})
}

二、数据缓存

1.uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

OBJECT参数说明：

参数名 类型 必填 说明
key String
是
本地缓存中的指定的key
data Any 是 需要存储的内容，只支持原生类型，及能够通过JSON.stringfiy序列化的对象。
success Function 否 接口调用成功的回调函数
falil Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用失败，成功都会执行）

2.uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

参数说明：

参数名 类型 必填 说明
key String
是
本地缓存中的指定的key
data Any 是 需要存储的内容，只支持原生类型，及能够通过JSON.stringfiy序列化的对象。

3.uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

OBJECT参数说明：

参数名 类型 必填 说明
key String
是
本地缓存中的指定的key
data Any 是 接口调用的回调函数，res = {data: key对应的内容}
success Function 否 接口调用成功的回调函数
falil Function 否 接口调用失败的回调函数

4.uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

参数说明：

参数名 类型 必填 说明
key String
是
本地缓存中的指定的key

5.uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

OBJECT 参数说明：

参数名 类型 必填 说明
key String
是
本地缓存中的指定的key
success Function 否 接口调用成功的回调函数
falil Function 否
接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数（调用失败，成功都会执行）

总结

以上就是今日所要分享的内容，最后依旧诚挚祝福屏幕前的你健康快乐、平安幸福！

到此这篇关于uni-app网络请求、数据缓存的文章就介绍到这了,更多相关uni-app网络请求、数据缓存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • uni-app调取接口的3种方式以及封装uni.request()详解

    目录 一.uni-app中调取接口的三种方式 1.uni.request({}) 2.uni.request({}).then() 3.async/await 二.封装uni.request(); 1.创建一个对象,将该对象挂在Vue的原型下 2.进入main.js文件 3.在页面中调用 uni-app 封装接口request请求 第一步.根目录下新建 config.js 文件 第二步.根目录下新建 utils/http.js 文件 第三步. 创建model 层 根目录下新建 models/in

  • uni-app如何读取本地json数据文件并渲染到页面上

    目录 前言 具体演示代码 1.文件后缀为.json类型 2.文件后缀为.js类型 注意事项 总结 前言 uni-app读取本地json数据文件,有下面两种方式可以实现: 文件后缀为.json类型 文件后缀为.js类型 具体演示代码 1.文件后缀为.json类型 非H5端,这种类型的文件,目前只能使用require进行导入,导入后为一个对象类型.import无法导入json文件. ① 在项目根目录下,新建一个目录data. ② 在data目录下,新建一个cityData.json文件,写上本地模拟

  • uni-app配置APP自定义顶部标题栏设置方法与注意事项

    uni-app配置APP自定义顶部标题栏设置方法与注意事项

    目录 pages.json文件 页面部分或首页部分 注意: 附:uni-app如何动态设置页面的标题 1. 新建页面 2. js动态修改标题 总结 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置.此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏 pages.json文件 代码块 //页面配置 "path"

  • 在uni-app中使用element-ui的方法与报错解决

    uni-app的相关UI组件库中可能会没有你想要的功能组件,自己去开发的话需要花很多时间,此时咱们可以将别的UI组件库给安装到uni-app中来,达到直接使用该UI组件库的功能组件,例如,安装element-ui uni-app使用element-ui需安装以下插件 npm i element-ui -S 按需引入组件需要装以下插件 npm install babel-plugin-component -D 当你安装完以上插件后,需要在main.js中进行引入,例如引入全部: import Vu

  • uni-app的基本使用教程

    目录 一.uni-app介绍 1.1为什么要去学习uni-app? 1.2 环境搭建 1.3 利用HbuilderX初始化项目 1.4 运行项目 1.5 介绍项目目录和文件作用 2.全局配置和页面配置 2.1 通过globalStyle进行全局配置 ​2.2 创建新的message页面 2.3 通过pages来配置页面 2.4 配置tabbar 2.5 condition启动模式配置 一.uni-app介绍 ​​uni-app​​​ 是一个使用 ​ ​Vue.js​​ 开发所有前端应用的框架,开

  • uni-app常用的几种页面跳转方式总结

    目录 一.uni.navigateTo(OBJECT) 二.uni.navigateBack(OBJECT) 三.uni.redirectTo(OBJECT) 四.uni.switchTab(BOJECT) 五.openURL 补充:传值与接收 总结 一.uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面 uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io) method

  • Android 网络请求框架Volley实例详解

    Android 网络请求框架Volley实例详解

    Android 网络请求框架Volley实例详解 首先上效果图 Logcat日志信息on Reponse Volley特别适合数据量不大但是通信频繁的场景,像文件上传下载不适合! 首先第一步 用到的RequetQueue RequestQueue.Java RequestQueue请求队列首先得先说一下,ReuqestQueue是如何对请求进行管理的...RequestQueue是对所有的请求进行保存...然后通过自身的start()方法开启一个CacheDispatcher线程用于缓存调度,开

  • 微信小程序之网络请求简单封装实例详解

    微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

  • uni-app网络请求、数据缓存实例详解

    目录 一.网络请求 1.配置请求 1.1 发送get请求 1.2 发送POST请求 二.数据缓存 1.uni.setStorage(OBJECT) 2.uni.setStorageSync(KEY,DATA) 3.uni.getStorage(OBJECT) 4.uni.getStorageSync(KEY) 5.uni.removeStorage(OBJECT) 总结 一.网络请求 在uni中可以调用uni.request方法进行请求网络请求 需要注意的是:在小程序中网络相关的 API 在使用

  • Android GZip的使用-开发中网络请求的压缩实例详解

    Android  GZip: gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序. HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.一般服务器中都安装有这个功能模块的,服务器端不需做改动. 当浏览器支持gzip 格式的时候, 服务器端会传输gzip格式的数据. 从Http 技术细节上讲,就是 http request 头中 有 "Accept-Encoding", "gzip" ,response 中就有返回头Content-En

  • Android  GZip的使用-开发中网络请求的压缩实例详解

    Android  GZip: gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序. HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.一般服务器中都安装有这个功能模块的,服务器端不需做改动. 当浏览器支持gzip 格式的时候, 服务器端会传输gzip格式的数据. 从Http 技术细节上讲,就是 http request 头中 有 "Accept-Encoding", "gzip" ,response 中就有返回头Content-En

  • 微信小程序 本地数据存储实例详解

    微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

  • Spring 整合 Hibernate 时启用二级缓存实例详解

    Spring 整合 Hibernate 时启用二级缓存实例详解

    Spring 整合 Hibernate 时启用二级缓存实例详解 写在前面: 1. 本例使用 Hibernate3 + Spring3: 2. 本例的查询使用了 HibernateTemplate: 1. 导入 ehcache-x.x.x.jar 包: 2. 在 applicationContext.xml 文件中找到 sessionFactory 相应的配置信息并在设置 hibernateProperties 中添加如下代码: <!-- 配置使用查询缓存 --> <prop key=&q

  • Java Web请求与响应实例详解

    Java Web请求与响应实例详解

    Servlet最主要作用就是处理客户端请求并作出回应,为此,针对每次请求,Web容器在调用service()之前都会创建两个对象,分别是HttpServletRequest和HttpServletResponse.其中HttpServletRequest封装HTTP请求消息,HttpServletResponse封装HTTP响应消息.需要注意的是,Web服务器运行过程中,每个Servlet都会只创建一个实例对象,不过每次请求都会调用Servlet实例的service(ServletRequest

  • JAVAEE Filter 过滤器设置是否缓存实例详解

    在网页中,每次的客户端访问服务器,有部分不用重复请求,如有些图片,视频等就没有必要每次都请求,这样会让服务器增大工作量.为了防止这样,我们采用过滤器来设置客户端是都缓存. 页面的缓存与不缓存设置及html页面中meta的作用 HTTP1.1中启用Cache-Control 来控制页面的缓存与否,这里介绍几个常用的参数: no-cache,浏览器和缓存服务器都不应该缓存页面信息: public,浏览器和缓存服务器都可以缓存页面信息: no-store,请求和响应的信息都不应该被存储在对方的磁盘系统

随机推荐