如何在 HTTP 请求中放置缓冲区？

Question

I'm trying to put a buffer in a request because I have a list of data to import. I want to have success request after one another. The problem I'm encountering is that it waits to upload all data of the request.

Here is the sample data:

[
  {
    "contacts": "dsds@dsd.com",
    "recipient": "dsd@dsd.com",
    "date_sent": "07/08/2020 17:05:04",
    "subject": "repurchase"
  },
  {
    "contacts": "asd@ret.com",
    "recipient": "test@yahoo.com",
    "date_sent": "07/10/2020 17:31:51",
    "subject": "biz"
  },
  {
    "contacts": "we@sdf.com",
    "recipient": "abc@yahoo.com",
    "date_sent": "07/09/2020 13:02:54",
    "subject": "rock"
  }
];

const createEngage = async(body) => {
  const BASE_URL = '/api/import'
  var requestOptions = {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        "Content-Type": "application/json"
      },
      body: body
    };

  fetch(BASE_URL, requestOptions)
    .then(response => response.text())
    .then(async result => {
      console.log(result);
    })
    .catch(error => console.log('error', error));
}

Answer 1

What you probably want to do is to loop over your data and use async / await to wait at each iteration. Your implementation of your asynchronous function currently does not await anything. Instead it should await the fetch request and the decoding of the body with response.text() .

Check the response for errors and wrap the fetch request in a try...catch block. If an error occurs then the catch block will be executed. Otherwise check theresponse object for any states or errors you want to include.

const data = [
  {
    "contacts": "dsds@dsd.com",
    "recipient": "dsd@dsd.com",
    "date_sent": "07/08/2020 17:05:04",
    "subject": "repurchase"
  },
  {
    "contacts": "asd@ret.com",
    "recipient": "test@yahoo.com",
    "date_sent": "07/10/2020 17:31:51",
    "subject": "biz"
  },
  {
    "contacts": "we@sdf.com",
    "recipient": "abc@yahoo.com",
    "date_sent": "07/09/2020 13:02:54",
    "subject": "rock"
  }
];

const BASE_URL = '/api/import'

/**
 * Sends a request for each individual item.
 */
const createEngage = async body => {
  const requestOptions = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body
  };
  try {
    const response = await fetch(BASE_URL, requestOptions);
    if (!response.ok) {
      alert('Your request has failed');
      return null;
    }
    const text = await response.text();
    return text;
  } catch(error) {
    alert('Your request caused an error');
  }
};

/**
 * Loop over each item and call createEngage.
 * Wait for the request to finish and continue.
 */
const createMultipleEngages = async data => {
  for (const item of data) {
    const result = await createEngage(item); // This will make the loop wait every time.
    console.log(result);
  }
};

// Call the function and start looping.
createMultipleEngages(data);