uni-app網絡請求、數據緩存實例詳解
更新時間：2022年11月12日 14:31:26 作者：Bonsoir777
這篇文章主要介紹了uni-app網絡請求、數據緩存的相關知識，本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、網絡請求
在uni中可以調用uni.request方法進行請求網絡請求
需要注意的是：在小程序中網絡相關的 API 在使用前需要配置域名白名單。
1.配置請求
以下為發(fā)送網絡請求的基本配置，可根據接口請求數據方法的不同，以不同的方式請求數據。
// #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 request1.1 發(fā)送get請求
// 引入request請求方法
import request from '../utils/request.js';
// 請求首頁基礎數據的方法
export const getHome = ( )=>{
return request({
url:'/index_category/data'
})
}1.2 發(fā)送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 | 否 | 接口調用結束的回調函數（調用失敗，成功都會執(zhí)行） |
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 | 否 | 接口調用結束的回調函數（調用失敗，成功都會執(zhí)行） |
總結
以上就是今日所要分享的內容，最后依舊誠摯祝福屏幕前的你健康快樂、平安幸福！
到此這篇關于uni-app網絡請求、數據緩存的文章就介紹到這了,更多相關uni-app網絡請求、數據緩存內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
如果你的項目要用到 JavaScript，而你不使用任何 JavaScript 框架，那么對于那些常用且各個瀏覽器明顯不同的地方就需要用函數來封裝起來。2010-03-03
識別瀏覽器的JavaScript引擎的方法對PC瀏覽器和移動瀏覽器都可用，其實實現原理就是下面的這段js，感興趣的朋友可以參考下2013-10-10
這篇文章主要介紹了JS實現網頁每隔3秒彈出一次對話框的方法,涉及JavaScript結合時間函數遞歸調用的相關技巧,非常簡單,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
下面小編就為大家?guī)硪黄褂肑S實現圖片輪播的實例(前后首尾相接)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關JS 箭頭函數的this指向，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要為大家詳細介紹了原生js生成圖片驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細介紹了原生JS實現隱藏顯示圖片，JS實現點擊切換圖片效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了javascript字符串循環(huán)匹配,實例分析三種常用的字符串循環(huán)匹配的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本文主要介紹了使用js獲取隱藏元素寬高的解決方案以及代碼思路，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了javascript實現了照片拖拽點擊置頂的照片墻代碼，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04