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

更新时间：2022年11月12日 14:31:26 作者：Bonsoir777

这篇文章主要介绍了uni-app网络请求、数据缓存的相关知识，本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

一、网络请求

在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网络请求、数据缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

webpack 打包压缩js和css的方法示例
本篇文章主要介绍了webpack 打包压缩js和css的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
js中opener与parent的区别详细解析
本篇文章主要是对js中opener与parent的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
JS中关于filter()方法的使用及说明
这篇文章主要介绍了JS中关于filter()方法的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
JavaScript中?. 和??分别是什么详解
在项目中我们往往要做很多很多的空值判断进行容错处理,往往伴随着三目运算、与或、if else来使用,下面这篇文章主要给大家介绍了关于JavaScript中?. 和??分别是什么的相关资料,需要的朋友可以参考下
2023-02-02
js如何清空input file的值
这篇文章主要介绍了js如何清空input file的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Javascript数据结构之栈和队列详解
要了解JavaScript数组的堆栈和队列方法的操作,需要先对堆栈和队列基础知识有所了解,下面这篇文章主要给大家介绍了关于Javascript数据结构之栈和队列的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
Bootstrap禁用响应式布局的实现方法
这篇文章主要介绍了Bootstrap禁用响应式布局的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
微信小程序实现翻牌抽奖动画
这篇文章主要为大家详细介绍了微信小程序实现翻牌抽奖动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
纯js实现仿QQ邮箱弹出确认框
仿QQ邮箱的弹出层，弹出确认框，主要是用火狐的firebug把html和css扣了下来，没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗，嘿嘿！
2015-04-04
基于JavaScript实现一个月饼音乐播放器
这篇文章主要为大家详细介绍了如何利用JavaScript实现一个简单的月饼音乐播放器，文中的示例代码讲解详细，感兴趣的小伙伴可以尝试一下
2022-09-09