我无法在 JavaScript 中获取帖子

问题描述 投票:0回答:0

我对代码有疑问。也许解决方案非常简单,但我正在迈出 JavaScript 的第一步,这对我来说并不明显。

我已经准备好了一些后端,邮递员发送 POST 就可以了。所以后端没问题。

我编写了一个简单的应用程序,按下按钮后将给定的数据保存在数据库中。

不幸的是,这不适用于调试器,一切都很好。但是,通过单击视图中的按钮,会出现错误并且不会调用 fetch。该对象未保存到数据库。

请帮忙。

Api = function() {
  this.header = new Headers({
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  })
};

Api.prototype.buildUrl = function(id) {
  return "http://localhost:3000/db/shop_name/" + id;
};

Api.prototype.post = function(id, data) {

  const urlPost = api.buildUrl(id.value);
  return fetch(urlPost, {
      method: "post",
      body: JSON.stringify(data),
      headers: this.header
    })
    .then(res => res.json())
    .then(res => {
      console.log("Dodałem użytkownika:");
      console.log(res);
    })
};

Api.prototype.get = function(id) {
  //const urlGet = api.buildUrl(id);
  return fetch(id, {
      method: "GET",
    })
    .then(resp => {
      alert(resp.json());

      return resp.json();
    })
};
Api.prototype.getAlll = function() {
  return fetch(url, {
      method: "GET"
    })
    .then(resp => {
      alert(resp.json());
      return resp.json()
    })
};

Api.prototype.update = function(id, data) {
  const url = api.buildUrl(id);
  return fetch(url, {
      method: "PUT",
      body: JSON.stringify(data)
    })
    .then(resp => {
      return resp.json()
        .catch(error => {
          let notFound = "The server can not find requested resource";
          document.getElementById("stars").innerHTML = notFound + error.status;
        })
    })
};


Api.prototype.addProduct = function(id, data) {
  return this.post(id, data);
};

Api.prototype.deleteProduct = function(id) {
  return this.delete(id);
};

Api.prototype.updateProduct = function(id, data) {
  return this.update(id, data);
};

Api.prototype.getProduct = function(id) {
  return this.get(id);
};
Api.prototype.getAllProducts = function() {
  return this.getAlll;
};

const Main = function() {
  this.id = document.getElementById("id");
  this.addCount = document.getElementById("count");
  this.addName = document.getElementById("name");
  this.addPrice = document.getElementById("price");
};


Main.prototype.add = function() {
  // const ido = this.id.value;
  const data = {
    "price": this.addPrice.value,
    "name": this.addName.value,
    "count": this.addCount.value,
  };
  //  let id = api.buildUrl(this.id.value);
  api.addProduct(this.id, data);
};


Main.prototype.update = function() {
  const data = {
    "price": this.price,
    "name": this.name,
    "count": this.count,
  };
  api.updateProduct(id, data);
};

Main.prototype.delete = function() {
  let id = api.buildUrl(this.id);
  api.deleteProduct(id);

};


Main.prototype.get = function() {
  let id = api.buildUrl(this.id.value);
  api.getProduct(id);

};

Main.prototype.getAll = function() {
  api.getAllProducts();

};

const api = new Api();
const main = new Main();


let addButton = document.getElementById('postBtn');
addButton.addEventListener('click', function() {
  main.add();
});

/*
addButton.addEventListener("click",main.add.bind(main));
*/


let updateButton = document.getElementById("updateBtn");
updateButton.addEventListener("click", function() {
  main.update();
});


let deleteButton = document.getElementById("deleteBtn");
deleteButton.addEventListener("click", function() {
  main.delete();
});

let getButton = document.getElementById("getBtn");
getButton.addEventListener("click", function() {
  main.get();
});


let getAllButton = document.getElementById("getAllBtn");
getAllButton.addEventListener("click", function() {
  let tst = main.getAll();
  console.log(tst);

});
javascript post fetch-api crud
© www.soinside.com 2019 - 2024. All rights reserved.