發送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);
});
}