我创建了一个最小的工作示例，它仅处理您的 post 方法，我认为问题在于您为发布请求“构建” URL 的方式：

Api.prototype.post = function(id, data) {
  // WRONG!
  // const urlPost = api.buildUrl(id)

  // CORRECT!
  const urlPost = this.buildUrl(id)

  return fetch(...)
}

看看这个与您的代码具有类似结构的示例：

const Api = function() {
  this.headers = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  })
}
Api.prototype.buildUrl = function(id) {
  return `https://jsonplaceholder.typicode.com/posts`
};
Api.prototype.post = function(id, data) {
  const urlPost = this.buildUrl()

  return fetch(urlPost, {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: this.headers,
  })
  .then(response => response.json())
};


function main() {
  const API = new Api()
  const submitBtn = document.getElementById(`submitBtn`)
  
  submitBtn.addEventListener(`click`, function() {
    API.post()
      .then(result => {
        console.log(`data was submitted`, Date.now())
        console.log(`result`, result)
      })
      .catch(error => {
        console.error(`handle your errors!`)
      })
  })
}

main()

<button id="submitBtn" type="button">Click to submit data</button>

希望这会有所帮助。

编辑

您必须在其他地方修复此问题，而不仅仅是 post 方法。

首先，您无法在 Api.prototype.post 方法内访问 api ，它超出了范围，因为您使用的是 const ，因此当您尝试在您的对象：

const Api = function() { ... }
Api.prototype.buildUrl = function() { ... }
Api.prototype.post = function(id, data) {
  const urlPost = this.buildUrl()
  // ...  
}

const api = new Api()
api.post(...)

其次， 始终处理您的错误并确保您 捕获 失败的承诺 。您很可能无法调试此问题，因为您错过了一些可以为您提供有关正在发生的事情的线索的错误。

Api.prototype.post = function(id, data) {
  const urlPost = this.buildUrl()

  return fetch(urlPost, {...})
    .then(...)
    .catch(error => { console.log(`error`, error.message) }
}

第三，再次，您遇到了范围问题 - api 在您的 Api 和 Main 实例的方法中不可用：

Api.prototype.post = function(...) {
  api.buildUrl(...) // NOT IN SCOPE!
}
Main.prototype.getAll = function() {
  api.getAllProducts() // ALSO NOT IN SCOPE
}

请改为执行以下操作：

const Main = function(api) {
  this.api = api
  // ...
}
Main.prototype.add = function() {
  const data = {...}
  return this.api.addProduct(this.id, data)
}

const api = new Api()
const main = new Main(api) // PASS `api` TO A CONSTRUCTOR
const btn = document.getElementById(`button`)

btn.addEventListener(`click`, function() {
  main.add()
    .then(...)
    .catch(...)
})

返回并修复 Api 和 Main 内的所有方法！

这是一个有效示例：

const Api = function() {
  this.headers = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  })
}
Api.prototype.buildUrl = function(id) {
  return `https://jsonplaceholder.typicode.com/posts`
};
Api.prototype.post = function(id, data) {
  const urlPost = this.buildUrl()

  return fetch(urlPost, {
    method: 'POST',
    body: JSON.stringify({
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: this.headers,
  })
  .then(response => response.json())
};
Api.prototype.addProduct = function(id, data) {
  return this.post(id, data)
}

function Main(api) {
  this.api = api
  this.id = 1
}
Main.prototype.add = function() {
  const data = {
    "price": 1,
    "name": "Bob",
    "count": 20
  }
  return this.api.addProduct(this.id, data)
}

const api = new Api()
const main = new Main(api)
const submitBtn = document.getElementById(`submitBtn`)

submitBtn.addEventListener(`click`, function() {
  main.add()
    .then(result => {
      console.log(`data was submitted`, Date.now())
      console.log(`result`, result)
    })
    .catch(error => {
      console.log(`handle your errors!`)
    })
})

<button id="submitBtn" type="button">Click me!</button>