如何等待ButterCMS API加载完成后执行脚本？

首先明确：ButterCMS的JS SDK初始化是同步操作，调用Butter('your-api-token')会立即返回可用的实例，不存在SDK本身“加载完成”的异步等待需求。你的问题大概率是以下两种场景之一，对应不同解决方案：

场景1：脚本依赖SDK请求返回的CMS内容 #

如果你的脚本需要操作通过SDK获取的后端数据（比如渲染后的页面元素、文章内容），直接通过Promise或async/await等待API请求完成即可：

// 假设你需要获取页面数据后执行脚本
async function runButterScript() {
  try {
    // 调用ButterCMS API获取数据
    const { data } = await butter.page.retrieve('*', 'your-target-page-slug')
    // 数据已返回，执行你的脚本逻辑
    processButterElements(data.data)
  } catch (error) {
    console.error('ButterCMS请求失败:', error)
  }
}

// 启动执行
runButterScript()

场景2：脚本依赖页面上动态生成的CMS DOM元素 #

如果你的脚本需要操作由CMS内容动态插入到页面的DOM元素，用MutationObserver监听DOM变化，直到目标元素出现再执行：

// 定义目标元素的选择器（替换成你实际的元素选择器）
const targetElementSelector = '.buttercms-content-block'

function waitForElement(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    const target = document.querySelector(selector)
    if (target) {
      observer.disconnect() // 找到元素后停止监听
      callback(target)
    }
  })

  // 监听整个body的子元素变化，包括子树
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: false
  })
}

// 使用示例：当目标元素出现时执行脚本
waitForElement(targetElementSelector, (element) => {
  // 这里编写操作该元素的代码
  element.classList.add('custom-styling')
})

排查之前尝试失败的原因 #

• 若用MutationObserver无效：检查选择器是否正确，或监听范围是否覆盖了元素插入的父容器（比如如果元素插入在某个特定div里，直接监听该div而非body会更高效）
• 若检查HTTP请求无效：ButterCMS的API请求地址格式为https://api.buttercms.com/v2/xxx，可在浏览器Network面板确认请求是否完成，但直接依赖SDK的Promise回调比监听请求更可靠

内容的提问来源于stack exchange，提问作者MH info