Did I make a mistake when sending the request?

Question

Mobile development

Good day to all! I have a question about my code. In general, there is a request that I send to the server, while it works fine, provided that Content-Type application/json is written in the header and I send data using JSON.stringify. But as soon as I change the request bodies to FormData, I start having problems. I am changing because I need to add photos to the request.
1) With async/await fetch api , my catch catches the Network request failed error
2) When using xhr along with FormData, the request is sent but a response is returned from the server that all required fields must be filled (they are filled).

Ps When sending via Postman, everything works

Pss I will answer all your questions about 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,
      });
    }
  };

Answer 1

The error was that FormData does not accept an array, my state.services was an array, I fixed this error and everything worked.