时间戳

首页 > 解决方案 > 谁能告诉我为什么我在控制台中收到 404 错误？

javascript - 谁能告诉我为什么我在控制台中收到 404 错误？

问题描述

我正在调用 rescountries api。当我打开控制台时。我收到以下错误“加载资源失败：服务器响应状态为 404（未找到）”但是我似乎在控制台中通过“console.log（数据）”行。是与 API 本身还是我在代码中所做的事情有关？提前致谢。

"use strict";

const btn = document.querySelector(".btn-country");
const countriesContainer = document.querySelector(".countries");

const getCountryData = function (country) {
  const request = new XMLHttpRequest();
  request.open("GET", `https://restcountries.com/v3.1/name/${country}`); 
  request.send();
request.addEventListener("load", function () {
    const [data] = JSON.parse(this.responseText); 
    console.log(data);
    const html = `<article class="country">
    <img class="country__img" src="${data.flag}"/>
    <div class="country__data">
      <h3 class="country__name">${data.name}</h3>
      <h4 class="country__region">${data.region}</h4>
      <p class="country__row"><span></span>${(
        +data.population / 100000
      ).toFixed(1)}</p>
      <p class="country__row"><span>️&lt;/span>${data.languages.eng}</p>
      <p class="country__row"><span></span>${data.currencies.symbol}</p>
    </div>
  </article>
  `;
    countriesContainer.insertAdjacentHTML("beforeend", html);
    countriesContainer.lastElementChild.opacity = 1;
  });
};


getCountryData("GB");
getCountryData("usa");

标签： javascript

解决方案

<img class="country__img" src=""> 您有 404 错误，因为您有以下divsrc属性应该是 URL - 而不是符号。您有 2 个电话，一个用于英国，一个用于美国，因此您将有 2 个这样的图像并且404 Not found会出现 2 个错误。

因此，您生成此图像的代码行<img class="country__img" src="${data.flag}"/>应该可能<div>${data.flag}</div>或相似。

例子：

"use strict";

const btn = document.querySelector(".btn-country");
const countriesContainer = document.querySelector(".countries");

const getCountryData = function (country) {
  const request = new XMLHttpRequest();
  request.open("GET", `https://restcountries.com/v3.1/name/${country}`); 
  request.send();
request.addEventListener("load", function () {
    const [data] = JSON.parse(this.responseText); 
    console.log(data);
    const html = `<article class="country">
    <div class="country__img">${data.flag}</div>
    <div class="country__data">
      <h3 class="country__name">${data.name}</h3>
      <h4 class="country__region">${data.region}</h4>
      <p class="country__row"><span></span>${(
        +data.population / 100000
      ).toFixed(1)}</p>
      <p class="country__row"><span>️&lt;/span>${data.languages.eng}</p>
      <p class="country__row"><span></span>${data.currencies.symbol}</p>
    </div>
  </article>
  `;
    countriesContainer.insertAdjacentHTML("beforeend", html);
    countriesContainer.lastElementChild.opacity = 1;
  });
};


getCountryData("GB");
getCountryData("usa");
<div class="countries"></div>

推荐阅读