Absolutely, you can cut down on the number of HTTP requests here—let's break down two practical approaches that align with your goal of minimizing server calls:

1. Parallelize Requests (Cut Total Latency, Keep 4 Requests But Run Simultaneously) #

While this doesn’t reduce the total number of requests to the file storage service, it drastically cuts down on the total time spent waiting for all files to load. Instead of waiting for one request to finish before starting the next, you can run all four requests in parallel using Promise.all().

Here’s how you’d adjust your code:

// Assume you have your profile object with four file columns: photo1, photo2, photo3, photo4
const fileUrls = [
  profile.get('photo1').url(),
  profile.get('photo2').url(),
  profile.get('photo3').url(),
  profile.get('photo4').url()
];

// Run all HTTP requests in parallel
const filePromises = fileUrls.map(url => 
  Parse.Cloud.httpRequest({ url })
    .then(data => data.buffer.toString('base64'))
);

// Wait for all promises to resolve
const [base64Photo1, base64Photo2, base64Photo3, base64Photo4] = await Promise.all(filePromises);

// Now you have all four base64 strings ready to use

2. Use a Back4app Cloud Function (Reduce Client-to-Server Requests to 1) #

This is the better option if you want to minimize the number of requests from your client to Back4app. You’ll create a single Cloud Function that handles fetching all four files in parallel on the backend, then returns all the base64 data in one response.

Step 1: Define the Cloud Function #

In your Back4app Cloud Code dashboard, add this function:

Parse.Cloud.define('getProfileFilesAsBase64', async (request) => {
  const { profileId } = request.params;
  
  // Fetch the Profile object
  const Profile = Parse.Object.extend('Profile');
  const query = new Parse.Query(Profile);
  const profile = await query.get(profileId);
  
  // Get all file URLs
  const fileColumns = ['photo1', 'photo2', 'photo3', 'photo4'];
  const fileUrls = fileColumns.map(col => profile.get(col).url());
  
  // Fetch all files in parallel
  const fileDataPromises = fileUrls.map(url => 
    Parse.Cloud.httpRequest({ url })
      .then(res => res.buffer.toString('base64'))
  );
  
  const base64Results = await Promise.all(fileDataPromises);
  
  // Map results back to column names for clarity
  return fileColumns.reduce((acc, col, index) => {
    acc[col] = base64Results[index];
    return acc;
  }, {});
});

Step 2: Call the Cloud Function from Your Client #

Now your client only needs to make one request to get all four base64 strings:

const result = await Parse.Cloud.run('getProfileFilesAsBase64', { profileId: 'your-profile-object-id' });

// Access the base64 data like:
// result.photo1, result.photo2, etc.

Key Considerations #

• Timeout Limits: Back4app Cloud Functions have a default timeout (usually 15 seconds). If your files are large or the file storage is slow, you might need to adjust this or optimize file sizes.
• Payload Size: Returning four base64 strings in one response can increase the payload size. If this becomes an issue, consider returning direct file URLs instead (but that brings back multiple client requests) or compressing the images before storing them.
• Caching: If your profile images don’t change often, cache the base64 results on the client side (e.g., in localStorage or a state management library) to avoid unnecessary requests entirely.

内容的提问来源于stack exchange，提问作者Tanzim Chowdhury