如何简化Leaflet项目中的XMLHttpRequest及现有Ajax脚本？

Hey there! Nice job getting your Google Sheet data integrated with Leaflet—let’s go over two key ways to simplify your implementation:

The modern fetch() API is way cleaner than XHR, uses Promises, and plays nicely with async/await for readable, linear code. Here’s how to rewrite your data-fetching logic:

async function fetchSheetData() {
  try {
    // Fetch the JSON from your exported Google Sheet
    const response = await fetch('your-json-file-url-here');
    
    // Check if the request succeeded
    if (!response.ok) {
      throw new Error(`Request failed: ${response.status}`);
    }
    
    // Parse the JSON response
    const sheetData = await response.json();
    
    // Now use the data directly in your Leaflet control
    renderLeafletWindow(sheetData);
  } catch (error) {
    console.error('Failed to load sheet data:', error);
  }
}

function renderLeafletWindow(data) {
  // Instead of using scattered variables like ch.copy1, access properties directly
  const windowContent = `
    <p>${data.copy1}</p>
    <p>${data.copy2}</p>
    <!-- Add other fields as needed -->
  `;
  
  L.control.window(map, { title: 'Sheet Info' })
    .content(windowContent)
    .show();
}

// Kick off the data fetch when your app loads
fetchSheetData();

This eliminates all the clunky XHR event handlers and callback nesting, making your code easier to debug and maintain.

Instead of assigning individual variables like ch.copy1, you can either:

• Destructure the properties you need for cleaner local access:

  // Inside renderLeafletWindow()
  const { copy1, copy2, copy3 } = data;
  const windowContent = `<p>${copy1}</p><p>${copy2}</p><p>${copy3}</p>`;
  

• Loop through data if your Sheet exports an array of rows (common for tabular data):

  // If your JSON is an array of row objects
  const windowContent = data.map(row => `
    <div class="row">
      <span>${row.Name}</span>
      <span>${row.Description}</span>
    </div>
  `).join('');
  

This avoids polluting your scope with dozens of single-use variables and makes your code more scalable if you add more fields to your Google Sheet later.

A quick bonus tip: Double-check your Google Sheet JSON export format—if it’s not already structured as a clean object/array, use a lightweight script to transform it during export (or in your fetch handler) to make data access even smoother.

内容的提问来源于stack exchange，提问作者Luke Dohner