uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存實(shí)例詳解
一、網(wǎng)絡(luò)請(qǐng)求
在uni中可以調(diào)用uni.request方法進(jìn)行請(qǐng)求網(wǎng)絡(luò)請(qǐng)求
需要注意的是：在小程序中網(wǎng)絡(luò)相關(guān)的 API 在使用前需要配置域名白名單。
1.配置請(qǐng)求
以下為發(fā)送網(wǎng)絡(luò)請(qǐng)求的基本配置，可根據(jù)接口請(qǐng)求數(shù)據(jù)方法的不同，以不同的方式請(qǐng)求數(shù)據(jù)。
// #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請(qǐng)求
// 引入request請(qǐng)求方法
import request from '../utils/request.js';
// 請(qǐng)求首頁(yè)基礎(chǔ)數(shù)據(jù)的方法
export const getHome = ( )=>{
return request({
url:'/index_category/data'
})
}1.2 發(fā)送POST請(qǐng)求
// 引入request請(qǐng)求方法
import request from '../utils/request.js';
// 獲取首頁(yè)指定分類(lèi)下的分頁(yè)數(shù)據(jù)
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}
})
}二、數(shù)據(jù)緩存
1.uni.setStorage(OBJECT)
將數(shù)據(jù)存儲(chǔ)在本地緩存中指定的 key 中，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容，這是一個(gè)異步接口。
OBJECT參數(shù)說(shuō)明：
| 參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
| key | String | 是 | 本地緩存中的指定的key |
| data | Any | 是 | 需要存儲(chǔ)的內(nèi)容，只支持原生類(lèi)型，及能夠通過(guò)JSON.stringfiy序列化的對(duì)象。 |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| falil | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用失敗，成功都會(huì)執(zhí)行） |
2.uni.setStorageSync(KEY,DATA)
將 data 存儲(chǔ)在本地緩存中指定的 key 中，會(huì)覆蓋掉原來(lái)該 key 對(duì)應(yīng)的內(nèi)容，這是一個(gè)同步接口。
參數(shù)說(shuō)明：
| 參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
| key | String | 是 | 本地緩存中的指定的key |
| data | Any | 是 | 需要存儲(chǔ)的內(nèi)容，只支持原生類(lèi)型，及能夠通過(guò)JSON.stringfiy序列化的對(duì)象。 |
3.uni.getStorage(OBJECT)
從本地緩存中異步獲取指定 key 對(duì)應(yīng)的內(nèi)容。
OBJECT參數(shù)說(shuō)明：
| 參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
| key | String | 是 | 本地緩存中的指定的key |
| data | Any | 是 | 接口調(diào)用的回調(diào)函數(shù)，res = {data: key對(duì)應(yīng)的內(nèi)容} |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| falil | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
4.uni.getStorageSync(KEY)
從本地緩存中同步獲取指定 key 對(duì)應(yīng)的內(nèi)容。
參數(shù)說(shuō)明：
| 參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
| key | String | 是 | 本地緩存中的指定的key |
5.uni.removeStorage(OBJECT)
從本地緩存中異步移除指定 key。
OBJECT 參數(shù)說(shuō)明：
| 參數(shù)名 | 類(lèi)型 | 必填 | 說(shuō)明 |
| key | String | 是 | 本地緩存中的指定的key |
| success | Function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) |
| falil | Function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) |
| complete | Function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用失敗，成功都會(huì)執(zhí)行） |
總結(jié)
以上就是今日所要分享的內(nèi)容，最后依舊誠(chéng)摯祝福屏幕前的你健康快樂(lè)、平安幸福！
到此這篇關(guān)于uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存的文章就介紹到這了,更多相關(guān)uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了webpack 打包壓縮js和css的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
js中opener與parent的區(qū)別詳細(xì)解析
本篇文章主要是對(duì)js中opener與parent的區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JS中關(guān)于filter()方法的使用及說(shuō)明
這篇文章主要介紹了JS中關(guān)于filter()方法的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在項(xiàng)目中我們往往要做很多很多的空值判斷進(jìn)行容錯(cuò)處理,往往伴隨著三目運(yùn)算、與或、if else來(lái)使用,下面這篇文章主要給大家介紹了關(guān)于JavaScript中?.?和??分別是什么的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了js如何清空input?file的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列詳解
要了解JavaScript數(shù)組的堆棧和隊(duì)列方法的操作,需要先對(duì)堆棧和隊(duì)列基礎(chǔ)知識(shí)有所了解,下面這篇文章主要給大家介紹了關(guān)于Javascript數(shù)據(jù)結(jié)構(gòu)之棧和隊(duì)列的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法
這篇文章主要介紹了Bootstrap禁用響應(yīng)式布局的實(shí)現(xiàn)方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)翻牌抽獎(jiǎng)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
純js實(shí)現(xiàn)仿QQ郵箱彈出確認(rèn)框
仿QQ郵箱的彈出層，彈出確認(rèn)框，主要是用火狐的firebug把html和css扣了下來(lái)，沒(méi)有做封裝,就定義了一個(gè)拖動(dòng)事件. 大家可以封裝自己的彈出窗，嘿嘿！2015-04-04
基于JavaScript實(shí)現(xiàn)一個(gè)月餅音樂(lè)播放器
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的月餅音樂(lè)播放器，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下2022-09-09