response rearraging in javascript in fetch api

Question

I currently working with fetch api in javascript and i have an array of months what i wanted is that to get the value of month from the database and the value is correct, but then the result in console was re arraging the array of months, how can I prevent this from re-arraging the arrays?

async function getMonthAccomplishment(m, s) {
    this.m = m;
    this.s = s;

    const param_point = 'filecase/monthaccomplishment/' + this.m + '/' + this.s;

    this.endpoint = url() + param_point;

    return await fetch(this.endpoint, {credentials: 'include'})
        .then((resolve) => {
            if(resolve.ok) {
                return resolve.text();
            }
        }, rejected => { console.error(rejected); })
        .then((response) => {
            return response;
        }).catch((error) => {
            console.error(error);
        });
}

let PostMonthAccomplishment = function() {
    this.m = '';
    this.s = '';
    this.t = '';
};

PostMonthAccomplishment.prototype.set = function(m, s, t) {
    this.m = m;
    this.s = s;
    this.t = t;

    if(typeof this.m === 'object' && typeof this.s === 'string') {
        this.m.forEach((month) => {
            getMonthAccomplishment(month, this.s)
                .then((data) => {
                    console.log(month + ': ' + this.s + ' -> ' + data);
                });
        });
    } else {
        console.error('invalid typeof!');
    }
};

const months = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
const status = ['beginning+balance', 'case+receive', 'Decided/Report+&+Recom.+Submitted+from+Pending'];

let pma = new PostMonthAccomplishment();
pma.set(months, status[1], '');

then the result: sometimes

dar:27 january: case+receive -> 0
dar:27 april: case+receive -> 0
dar:27 may: case+receive -> 0
dar:27 march: case+receive -> 0
dar:27 june: case+receive -> 0
dar:27 february: case+receive -> 0
dar:27 july: case+receive -> 0
dar:27 august: case+receive -> 0
dar:27 september: case+receive -> 0
dar:27 october: case+receive -> 0
dar:27 november: case+receive -> 0
dar:27 december: case+receive -> 0

sometimes

dar:27 january: case+receive -> 0
dar:27 february: case+receive -> 0
dar:27 june: case+receive -> 0
dar:27 april: case+receive -> 0
dar:27 march: case+receive -> 0
dar:27 may: case+receive -> 0
dar:27 july: case+receive -> 0
dar:27 august: case+receive -> 0
dar:27 september: case+receive -> 0
dar:27 october: case+receive -> 0
dar:27 november: case+receive -> 0
dar:27 december: case+receive -> 0

Don't use async..await or promises in general with forEach, unless you know what you're doing. Possible dupe of https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop — Estus Flask, Jun 26 '18 at 09:15

ToujouAya · Accepted Answer · 2018-06-26T08:20:39.977

if you want to do things sequentially it is easy to simply have multiple lines with await statements and pipe the output from one async call into another async call, as is normally done with promises. You should put your array data into async function something like this: this code for parallel request

async function processArr(arr) {
  let pArray = []
  for(const item of arr) {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/'+ item)
    pArray.push(response.json())
  }
  const months = await Promise.all(pArray);
  console.log(months)
  return months
}

processArr([1, 2, 3])

p/s update for sequentially

async function processArr(arr) {
  let pArray = []
  for(const item of arr) {
    let response = await fetch('https://jsonplaceholder.typicode.com/posts/'+ item)
    let data = await response.json();
  }
}

processArr([1, 2, 3])

response rearraging in javascript in fetch api

1 Answers1