RN中提供了fetch网络请求框架,使用起来已经很方便了,为了不重复写同样的代码,所以对其作了二次封装,使用起来感觉很方便。
一,fetch封装:
export default class FetchManager {
/*
* get请求
* url:请求地址
* data:参数
* callback:回调函数
* */
static get(router,params,successCallback,failureCallback){
var requestUrl = url
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
// for (let [key, value] of params) {
// paramsArray.push(key + '=' + value)
// }
if (url.search(/\?/) === -1) {
requestUrl += router + '?' + paramsArray.join('&')
} else {
requestUrl += + '&' + paramsArray.join('&')
}
}
//fetch请求
console.log(requestUrl)
fetch(requestUrl,{
method: 'GET',
}).then((response) => {
return response.json()
}).then((data)=>{
successCallback(data)
}).catch((err)=>{
failureCallback(err)
}).done();
}
二,具体使用:
①导入文件:
import FetchManager from '../utils/fetchManager';
具体导入需根据自己的文件路劲
② 网络请求部分:
/**登录请求*/
login(){if(this.account==''){
Alert.alert('请输入登录账号')
return
}
var params = {'umobile':this.account,'upass':this.password}
FetchManager.get("UserLogin",params,(response) => {
if(response.length == 0){
Alert.alert("账号或密码错误")
return
}
userData = response[0]
console.log(response[0])
this.props.navigation.navigate('Main')
let loginData = {account:this.account,password:this.password}
AsyncStorage.setItem('loginData',JSON.stringify(loginData),(error)=>{
if(error){
console.log('存储数据发生错误')
}else {
console.log('存储了数据')
}
})
},
(error) => {
console.log(error)
})
}