App每每都有緩存功用,比方罕見的消息類運用,假如你封閉收集,你上次翻開App加載的數據還在,只是不能加載新的數據了。
我的博客bougieblog.cn,迎接前來尬聊。
集合處置懲罰要求
假如你fetch數據的頁面有多個,不集合處置懲罰的話每一個頁面都要零丁舉行緩存處置懲罰。那末,怎樣對http要求舉行集合處置懲罰?
在WebApp中罕見的做法就是將要求放在action
內里,比方Vuex
和Redux
。但是在營業邏輯較少的App中,我們每每能夠不需要Redux
。這時候就需要我們本身對集合要求舉行封裝。
封裝AsyncStorage
AsyncStorage只能存取字符串,我們需封裝一下,讓它能存取json
:
import { AsyncStorage } from 'react-native'
class Storage {
set({key, val}) {
return AsyncStorage.setItem(key, JSON.stringify(val))
}
get(key) {
return AsyncStorage.getItem(key).then(val => {
return JSON.parse(val)
})
}
remove(key) {
return AsyncStorage.removeItem(key)
}
clear() {
return AsyncStorage.clear()
}
}
export default new Storage()
命名為storage.js
封裝大眾要求函數
在收集故障時獵取storage里的內容,收集優越時更新storage。
import axios from 'axios'
import storage from './storage'
import apiList from './apiList'
import {NetInfo, ToastAndroid} from 'react-native'
/**
* @param {String} api 接口稱號
* @param {Object} [replace={}] 替代url中的{}包裹的參數
* @param {Object} [data={}] 傳給服務端的數據
* @param {Object} [headers={}] http要求頭參數
* @return {Promise} 返回promise
*/
const $http = async ({api, replace, data, headers}) => {
let regExp = /\{ *([\w_\-]+) *\}/g,
url = apiList[api].url,
replaceList = url.match(regExp)
if(replaceList) {
replaceList.forEach(i => {
let key = i.slice(1, i.length - 1)
url = url.replace(i, replace[key])
})
}
let netStatu = await NetInfo.getConnectionInfo()
let result
if(['none', 'unknown'].includes(netStatu.type)) {
ToastAndroid.show('請檢查您的收集連接', ToastAndroid.SHORT)
result = await storage.get(api) || null
} else {
try {
let {data} = await axios({
method: apiList[api].method,
url: url,
data: data,
headers: headers
})
result = data
} catch(err) {
ToastAndroid.show(err.message, ToastAndroid.SHORT)
result = await storage.get(api) || null
}
await storage.set({
key: api,
val: result
})
}
return result
}
export default $http
命名為service.js
要求設置
為標示要求唯一性,我們需給每一個要求取一個稱號:
export default {
GET_NEWS_LIST: {
url: '/my/news?pageNum={pageNum}&pageSize={pageSize}',
method: 'get'
}
}
命名為apiList.js
要求挪用
我們能夠模擬一下Vuex
或Redux
的action:
import $http from './service'
export async function getNewsList(pageNum, pageSize) {
return await $http({
api: 'GET_NEWS_LIST',
replace: {
pageNum,
pageSize
}
})
}
命名為serviceAction.js
挪用:
import {getNewsList} from './serviceAction'
// ...
async componentDidMount() {
let newsList = await getNewsList(1)
this.setState({
newsList
})
}
// ...