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