Did I make a mistake when sending the request?

All kind time of day! I've got a question in my code. In General there is a request which I send to the server while it works fine provided that the prescribed header Content-Type application/json and I send the data using JSON.stringify. But as soon as I change bodies request for FormData I begin to have problems. Change due to the fact that I need to add pictures per request.
1) When async/await api fetch my catch catches the error Network request failed
2) When using xhr with FormData request is sent but returns the response from the server that all required fields must be filled (they filled).

Ps When you send using Postman everything works

Pss will Answer all questions you may have on my question.

makeCall = async () => {
this.setState({
 loadingVisible: true,
});
 let token = await AsyncStorage.getItem('@token');
 // let {images} = this.state;
console.log(token);
 let calling = new FormData();

 calling.append('services', this.state.services);
 calling.append('employe_group_code', this.state.employe_group_code);
 calling.append('addantial_comment', this.state.addantial_comment);
 calling.append('address', this.state.address);
 calling.append('coor_lat', this.state.coor_lat);
 calling.append('coor_long', this.state.coor_long);

 if (this.state.images_param.length != 0) {
 let fileExt = this.state.images_param[0].name.split('.')
console.log(fileExt);

 for (let index = 0; index < this.state.images_param.length; index++) {

console.log(this.state.images_param[index]);

 calling.append('images[]', {
 uri: Platform.OS === "android" ? this.state.images_param[index].uri : this.state.images_param[index].uri.replace("file://", ""),
 name: `photo.${fileExt[1]}`,
 type: `image/jpeg`
})
}
}
console.log(calling);

 try {
 let res = await fetch(DOMAIN, {
 method: 'POST',
 headers: {
 // Accept: 'application/json',
 Authorization: 'Bearer' + token,
 'Content-Type': 'multipart/form-data', 
},
 body: calling
});
console.log(res);

 let res_json = await res.json();
 if (res_json.errors) {
 await updateToken();
 token = await AsyncStorage.getItem('@token');
console.log(token);
 res = await fetch(DOMAIN, {
 method: 'POST',
 headers: {
 Authorization: 'Bearer' + token,
 'Content-Type': 'multipart/form-data',
},
 body: calling
});
 res_json = await res.json();
console.log(res_json);
this.setState({
 modalVisible: false,
});
 this.props.navigation.navigate('DIRECTION', {
 coor_lat: this.state.coor_lat,
 coor_long: this.state.coor_long,
 item_id: res_json.call.id
});
 } else {
this.setState({
 loadingVisible: false,
});
 this.props.navigation.navigate('DIRECTION', {
 coor_lat: this.state.coor_lat,
 coor_long: this.state.coor_long,
 item_id: res_json.call.id
});
}
 } catch (error) {
console.warn(error);
console.warn(JSON.stringify(error));
this.setState({
 loadingVisible: false,
});
}
 };
April 3rd 20 at 17:22
1 answer
April 3rd 20 at 17:24
Solution
The mistake was that the FormData doesn't accept an array, my state.services was an array, I fixed this bug and it worked.

Find more questions by tags AJAXMobile developmentReactReact Native