Question

我想让fetch('/fetchDataAll')充满活力。取决于单击哪个按钮。有人帮忙吗？

的JavaScript

class DbApi {
    constructor() {

    }
    async getDbData() {
        const dataResponse = await fetch('/fetchDataAll')

        const dataJson = await dataResponse.json()

        return dataJson

    }
}


// the object that maps the data-fetcher attributes to their equivalent functions
const fetcherObject = {
    all: fetchAll,
    rookies: fetchRookies,
    ufra: fetchUrfa

};

const bestBtn = document.querySelector('.jsBestBtnList')

bestBtn.addEventListener("click", function (e) {
    let target = e.target;
    let fetchFn = fetcherObject[target.dataset.fetcher];
    if (fetchFn) { 
        fetchFn();

    }

});

let show = document.querySelector('#show')

const dbApi = new DbApi

function fetchAll(){
  dbApi.getDbData()
    .then(data => {
        show.innerHTML = "";
        let players = data.result; // Get the results

        show.innerHTML  = players.map(player => {

            let colorToChange = "";
            let plusMinusSign = "";
            let colorWhite = "#FFFFFF";


            if (player.scoreChange >= 0) {
                colorToChange = "#66FF13";
                plusMinusSign = "+";
            }
            else {
                colorToChange = "#D0021B";
                plusMinusSign = "";
            }

            return `<p style='color:${colorWhite}'>${player.playerName}</p>
            <p style='color:${colorWhite}'>${player.teamName}</p>
            <h3 style='color:${colorToChange}'>${plusMinusSign} ${player.scoreChange} %</h3>`
        }).join('')

    })
    .catch(function (error) {
        console.log(error);
    });
}

HTML

<div class="jsBestNtnList">
    <button class="fetcher-btn" data-fetcher="all">Fetch all</button>
    <button class="fetcher-btn" data-fetcher="ufra">Fetch ufra</button>
    <button class="fetcher-btn" data-fetcher="rookies">Fetch rookies</button>
</div>

Answer 1

处理此问题的最少侵入性方法（可能有更好的方法需要对代码进行重大调整）将为fetcherObject中定义的每个获取项定义三个函数。并使getDbData接受一个path参数，该参数将是一个不同的URL，基于该参数将由三个不同的函数传递。

＆＃13;

class DbApi {
  constructor() {

  }
  async getDbData(path) {
    const dataResponse = await fetch(path)

    const dataJson = await dataResponse.json()

    return dataJson

  }
}


// the object that maps the data-fetcher attributes to their equivalent functions
const fetcherObject = {
  all: fetchAll,
  rookies: fetchRookies,
  ufra: fetchUrfa
};

const bestBtn = document.querySelector('.jsBestBtnList')

bestBtn.addEventListener("click", function(e) {
  let target = e.target;
  let fetchFn = fetcherObject[target.dataset.fetcher];
  if (fetchFn) {
    fetchFn();

  }

});
const dbApi = new DbApi


// Functions which call getDbData with different params based on button clicked
function fetchAll() {
  dbApi.getDbData('/fetchDataAll')
    .then(data => {
      // .. Rest of code

    })
    .catch(function(error) {
      console.log(error);
    });
}
function fetchUrfa() {
  dbApi.getDbData('/fetchDataUfra')
    .then(data => {
      // .. Rest of code

    })
    .catch(function(error) {
      console.log(error);
    });
}

function fetchRookies() {
  dbApi.getDbData('/fetchDataRookies')
    .then(data => {
      // .. Rest of code

    })
    .catch(function(error) {
      console.log(error);
    });
}

＆＃13;

<div class="jsBestNtnList">
  <button class="fetcher-btn" data-fetcher="all">Fetch all</button>
  <button class="fetcher-btn" data-fetcher="ufra">Fetch ufra</button>
  <button class="fetcher-btn" data-fetcher="rookies">Fetch rookies</button>
</div>

＆＃13;

Answer 2

您可以像这样添加和修改代码（其余保持不变）。

＆＃13;

{{1}}

＆＃13;

Answer 3

您可以为getDbData添加url参数，如下所示：

class DbApi {
    constructor() {
    }

    async getDbData(url) {
        const dataResponse = await fetch(url)
        const dataJson = await dataResponse.json()
        return dataJson
    }
}

const bestBtn = document.querySelector('.jsBestBtnList')

bestBtn.addEventListener("click", function (e) {
    let target = e.target;
    let url = target.dataset.url;
    if (url) { 
        fetchUrl(url);
    }
});

let show = document.querySelector('#show')

const dbApi = new DbApi

function fetchUrl(url){
  dbApi.getDbData(url)
    .then(data => {
        show.innerHTML = "";
        let players = data.result; // Get the results

        show.innerHTML  = players.map(player => {

            let colorToChange = "";
            let plusMinusSign = "";
            let colorWhite = "#FFFFFF";


            if (player.scoreChange >= 0) {
                colorToChange = "#66FF13";
                plusMinusSign = "+";
            }
            else {
                colorToChange = "#D0021B";
                plusMinusSign = "";
            }

            return `<p style='color:${colorWhite}'>${player.playerName}</p>
            <p style='color:${colorWhite}'>${player.teamName}</p>
            <h3 style='color:${colorToChange}'>${plusMinusSign} ${player.scoreChange} %</h3>`
        }).join('')

    })
    .catch(function (error) {
        console.log(error);
    });
}


<button class="fetcher-btn" data-url="/fetchDataAll">Fetch all</button>
<button class="fetcher-btn" data-url="/fetchDataUfra">Fetch ufra</button>
<button class="fetcher-btn" data-url="/fetchDataRookies">Fetch rookies</button>

如何获取动态链接JavaScript

3 个答案: