JavaScript fetch API不工作初学者问题

kokeuurv 于 12个月前发布在 Java

关注(0)|答案(1)|浏览(110)

我有一个简单的代码，我试图发送一个帖子，但我的代码有问题.后不工作，窗帘后面，我有一个简单的后端，它的作品100%.所以问题是与代码上面.请帮助我，也许是有问题的范围？

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(json => console.log(JSON.stringify(json)))
};

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

来源：https://stackoverflow.com/questions/59338392/javascript-fetch-api-does-not-work-beginner-question

1条答案

按热度按时间

piwo6bdm1#

我创建了一个最小的工作示例，只处理你的post方法，我认为问题在于你为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，所以当你试图在你的对象的示例上调用方法时，使用this：

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

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

型
第二，总是处理你的错误，并确保你的catch承诺失败。你很可能无法调试这个问题，因为你错过了错误，这将给你给予线索，发生了什么。

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>

赞(0）回复(0）举报 12个月前

我来回答

JavaScript fetch API不工作初学者问题

1条答案

相关问题

热门标签

最新问答