如何使用 API 而不是冗长的 javascript？

问题描述

您好，我是 javascript 新手，但我尽我所能编写了一个 javascript，其中显示了一些带有良好分页的引号。但是如果我需要上传更多的报价，我需要编辑 javascript 本身。所以我有一个 api 页面，其中引号是 json 格式。

我的 API 页面 https://goodman456.000webhostapp.com/api.php 注意：我使用了引号中的状态词。

我的html

 <div class="allquotes"></div>
<div class="pagable-status">
  <label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
  <div class="pagable-actions">
    <button class="page-btn-first">&#x226A;</button>
    <button class="page-btn-prev">&#60;</button>
    <input type="number" name="page-curr" min="1" value="1" />
    <button class="page-btn-next">&#62;</button>
    <button class="page-btn-last">&#x226B;</button>
    <select name="page-size">
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select>
  </div>
  <label>(<span class="result-count"></span> items)</label>
</div>

我的 JavaScript

const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');

let results = [];

const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());

const pageResponse = (records,pageSize,page) =>
  (start => records.slice(start,Math.min(records.length,start + pageSize)))
  (pageSize * (page - 1));

const main = async() => {
  btnFirst.addEventListener('click',navFirst);
  btnPrev.addEventListener('click',navPrev);
  btnNext.addEventListener('click',navNext);
  btnLast.addEventListener('click',navLast);
  pageSize.addEventListener('change',changeCount);

  results = await retrieveAllQuotes();
  updatePager(results);
  redraw();
};
const redraw = () => {
  resultEl.innerHTML = '';
  const paged = pageResponse(results,getPageSize(),getCurrPage());
  const contents = document.createElement('div');
  contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">copy</button></div></div>`).join('');
  resultEl.append(contents);
};

const navFirst = (e) => {
  pageNoCurr.textContent = 1;
  pageCurr.value = 1;
  redraw();
}

const navPrev = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const prevPage = curr > 1 ? curr - 1 : curr;
  pageCurr.value = prevPage;
  pageNoCurr.textContent = prevPage;
  redraw();
}

const navNext = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const nextPage = curr < pages ? curr + 1 : curr;
  pageCurr.value = nextPage;
  pageNoCurr.textContent = nextPage;
  redraw();
}

const navLast = (e) => {
  pageNoCurr.textContent = getPageCount();
  pageCurr.value = getPageCount();
  redraw();
}

const changeCount = () => {
  updatePager();
  redraw();
};

const updatePager = () => {
  const count = getPageCount();
  const curr = getCurrPage();
  pageCurr.value = curr > count ? 1 : curr;
  pageNoCurr.textContent = curr > count ? 1 : curr;
  pageNoCount.textContent = count;
  resultCount.textContent = getResultCount();
};

const retrieveAllQuotes = async function() {

  // write your asynchronous fetching here

  return[{
      quotes: "1The cat is better than dog."
    },{
      quotes: "2Google is a open source library."
    },{
      quotes: "3Cats are better than ferrets."
    },{
      quotes: "4love books."
    },{
      quotes: "5Life is short make it possible."
    },{
      quotes: "6The cat is better than dog"
    },{
      quotes: "7Google is a open source library."
    },{
      quotes: "8Cats are better than ferrets."
    },{
      quotes: "9love books."
    },{
      quotes: "10Life is short make it possible."
    },]; 
}
main();

你注意到这个部分了吗

return[{
      quotes: "1The cat is better than dog."
    },]; 
}

我需要在这里更新报价。通过 PHP 编辑 JSON 文件对我来说很容易。所以请修改上面的javascript，以便我可以使用我的网址。

所以如果有人可以帮忙请！！

解决方法

以下应该可以正常工作。

const retrieveAllQuotes = async function() {
  // here we are making a network call to your api
  const response = await fetch('https://goodman456.000webhostapp.com/api.php');
  
  // then converting it to json instead of a readable stream
  const data = await response.json();

  // finally go over the array and return new object with renamed key
  const results = data.map(val => ({quotes: val.status}));

  return results;
}

阅读有关 fetch 和 promises(async/await) 的信息。