无法在Main对象内通过fetch API获取数据的技术咨询

你的代码核心问题是对象内的this指向混乱和变量引用错误，导致API调用和数据处理无法正常工作。下面是问题拆解和修复后的完整方案：

原代码的核心错误 #

• API方法里直接用wordInput.value，但该元素是存在Main对象的this.wordInput属性中，必须通过this访问
• 输入事件绑定的searchWord_input是input事件的回调，你需要在这个回调里触发API调用，而不是把API的返回直接传给它
• fetch的.then(this.Events.searchWord_input)里的this指向会丢失，需要绑定正确的上下文

修复后的完整代码 #

const Main = {
  init: function () {
    this.cacheSelectors()
    this.bindEvents()
  },

  cacheSelectors: function () {
    this.wordInput = document.querySelector('#wordInput')
    this.mainWord = document.querySelector('#mainWord')
  },

  bindEvents: function() {
    // 绑定input事件，触发搜索逻辑
    this.wordInput.addEventListener('input', this.Events.searchWord_input.bind(this))
  },

  Events: {
    searchWord_input: function() {
      // 输入事件触发时调用API方法
      this.API()
    },
    // 新增处理API返回数据的方法
    handleDictionaryData: function(data) {
      console.log(data)
      // 这里把数据渲染到页面，比如显示单词
      if (data.length > 0) {
        this.mainWord.textContent = data[0].word
      }
    }
  },

  API: function () {
    // 用this访问对象内的wordInput属性
    if (this.wordInput.value.trim()) {
      fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${this.wordInput.value.trim()}`)
        .then(response => {
          if (!response.ok) throw new Error('请求失败')
          return response.json()
        })
        .then(this.Events.handleDictionaryData.bind(this)) // 绑定this到Main对象
        .catch(function () {
          alert('查询出错，请检查单词拼写！')
        })
    }
  },
}

Main.init()

关键修改说明 #

1. 变量访问修正：所有对象内的DOM元素都通过this.xxx访问，比如this.wordInput.value
2. 事件逻辑拆分：把输入事件的回调拆成两步——input事件触发时调用API，API返回后调用专门的数据处理方法handleDictionaryData
3. this指向绑定：通过.bind(this)确保Events里的方法和fetch的回调都能正确访问Main对象的属性（比如this.mainWord）
4. 增加请求校验：添加response.ok判断处理HTTP错误状态，同时给输入值加trim()避免空字符请求

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