发送Fetch网络请求时需要注意,如果服务端返回的json数据是string类型的,在解析时要先将其JSON格式化,否则在更新数据源时会逐个遍历string字符。
// 将字符串JSON格式化
JSON.parse(responseData)
// 将JSON数据转化为字符串
JSON.stringify(responseData)
//更新数据源
this.setState({
dataSource:this.state.dataSource.cloneWithRows(JSON.parse(responseData).data)
});
GET请求(无参数)
startGetRequest(){
fetch(this.props.api_url)
.then((response) => response.json()) //下一步操作
.then((responseData) => {
console.log(responseData); //打印出来
// alert(responseData);
});
})
.catch((error)=>{
alert(error);
})
}
GET请求(有参数)
GetNormal(url,params){
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
//fetch请求
fetch(url,{
method: 'GET',
})
.then((response) => response.json())
.then((json) => {
console.log('json'+JSON.stringify(json));
//动态赋值
this.setState({
dataSource: json.data
})
})
.catch((error) => {
//alert(error)
})
}
//调用方法
getBannerData(){
let Url = Server+'/etspace/activity/list';
this.GetNormal(Url,{'pageindex':'1','pagesize':'5'});
}
Post请求
startPostRequest(){
var url = Service.eduConsultUrl;
let formData = new FormData();
// 请求参数 ('key',value)
formData.append('extend', extend);
formData.append('classid','439');
formData.append('pageSize','5');
fetch(url,{
method:'POST',
headers:{
'Content-Type':'multipart/form-data',
},
body:formData,
})
.then((response) => response.text() )
.then((responseData)=>{
console.log('responseData',responseData);
// json格式化 JSON.stringify(responseData)转字符串
console.log('json格式化',JSON.parse(responseData));
// alert(responseData);
})
.catch((error)=>{console.error('error',error)
alert(error);
});
}
网友评论