如何使用Dropbox JavaScript API递归遍历指定父文件夹以获取所有文件列表

Got it, let's tweak your existing code to add recursive folder traversal so you can get every file and subfolder under a parent directory. Here's a step-by-step solution that builds on your current setup:

Key Changes Explained #

The core idea is to create a recursive function that:

1. Fetches the contents of a given folder (handling pagination, since Dropbox limits results to 2000 entries per API call)
2. Checks each entry—if it's a folder, recursively fetches its contents
3. Aggregates all entries (files and folders) into a single list

Modified Full Code #

Replace your existing <script> section with this updated version:

var form = document.getElementById('basic-form');
form.onsubmit = async function listFiles(e) {
    e.preventDefault();
    var ACCESS_TOKEN = document.getElementById('access-token').value;
    var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
    const filesList = document.getElementById('files');
    filesList.innerHTML = ''; // Clear old results before fetching new ones

    try {
        // Start recursive fetch from your target parent folder (use '' for root)
        const allEntries = await fetchAllFiles(dbx, '');
        displayFiles(allEntries);
    } catch (error) {
        console.error(error);
        filesList.innerHTML = `<li>Oops, there was an error: ${error.message}</li>`;
    }
}

// Recursive function to fetch all entries (files + folders)
async function fetchAllFiles(dbx, path) {
    let allEntries = [];
    let hasMore = true;
    let cursor = null;

    // Handle Dropbox API pagination (max 2000 entries per call)
    while (hasMore) {
        const response = cursor 
            ? await dbx.filesListFolderContinue({ cursor: cursor })
            : await dbx.filesListFolder({ path: path });
        
        const currentEntries = response.result.entries;
        allEntries.push(...currentEntries);

        // Recursively fetch content for all subfolders in current directory
        const subfolderFetches = currentEntries
            .filter(entry => entry[".tag"] === "folder")
            .map(folder => fetchAllFiles(dbx, folder.path_lower));
        
        // Wait for all subfolder requests to finish and merge their entries
        const subfolderEntries = await Promise.all(subfolderFetches);
        allEntries.push(...subfolderEntries.flat());

        hasMore = response.result.has_more;
        cursor = response.result.cursor;
    }

    return allEntries;
}

function displayFiles(files) {
    var filesList = document.getElementById('files');
    files.forEach(entry => {
        const li = document.createElement('li');
        // Show full path instead of just name to see recursive structure clearly
        li.textContent = `${entry[".tag"]} ${entry.path_lower}`;
        filesList.appendChild(li);
    });
}

What's New? #

• Async/Await: Makes handling nested Promises (from recursive API calls) much cleaner than chaining .then()
• Pagination Handling: Ensures we get every entry even if a folder has more than 2000 items
• Recursive Folder Traversal: Automatically dives into every subfolder and collects its contents
• Clearer Display: Shows the full path of each entry so you can verify the recursive structure

Quick Notes #

• Make sure your access token has the files.content.read permission (you can check this in the Dropbox App Console)
• If you're dealing with a huge folder structure, consider adding a loading spinner to let users know the process is running
• If you hit API rate limits, you can add a simple retry delay (the Dropbox SDK does handle some retries automatically, but complex cases may need custom logic)

内容的提问来源于stack exchange，提问作者Code Guy