Javascript Fetch API를 사용하여 데이터 가져오기

오늘은 일부 데이터를 Wikipedia 쿼리 태그에 연결하여 IP 주소가 변경되면 위치도 변경되고 Wikipedia 기사도 변경되도록 하는 방법을 안내해 드리겠습니다.

당신은 이와 같은 것을 보게 될 것입니다.

시작하기

이 실습에서는 GeoIP을 사용하여 lat , long , city 및 state 를 검색합니다. 다음은 생성자의 모습입니다.

  constructor() {
    super();
    this.locationEndpoint = 'https://freegeoip.app/json/';
    this.long = null;
    this.lat = null;
    this.city = null;
    this.state = null;
  }

다음으로 나중에 데이터를 채우는 데 사용할 속성을 설정합니다. 여기서 위도와 경도를 정수로 반환하고 도시와 주를 문자열로 반환합니다.

  static get properties() {
    return {
      long: { type: Number },
      lat: { type: Number },
      city: { type: String },
      state: { type: String },
    };
  }

데이터 가져오기

API에서 데이터를 가져오기 전에 fetch가 무엇인지 이야기합시다. Fetch API는 웹 브라우저에서 서버에 HTTP 요청을 할 수 있는 인터페이스입니다. 이 실습에서 IP 주소를 기반으로 위치를 검색하기 위해 fetch를 사용합니다. 실험실에서 가져오기를 활용하는 방법을 확인하십시오.

  async getGEOIPData() {
    const IPClass = new UserIP();
    const userIPData = await IPClass.updateUserIP();
    return fetch(this.locationEndpoint + userIPData.ip)
      .then(resp => {
        if (resp.ok) {
          return resp.json();
        }
        return false;
      })
      .then(data => {
        // console.log(data);
        this.long = data.longitude;
        this.lat = data.latitude;
        this.city = data.city;
        this.state = data.region_name;

        return data;
      });
  }

이 코드 블록에서 locationEndpoint로 설정한 URL을 사용하여 IP 주소를 기반으로 우리 위치를 fetch 확인할 수 있었습니다. API를 보유하고 있는 서버에 HTTP 요청을 하기 위해 fetch를 사용했고, 응답이 "ok"이면 API 호출을 JSON으로 반환합니다. API 응답은 다음과 같습니다.

{
"ip": "102.16.28.100",
"country_code": "US",
"country_name": "United States",
"region_code": "PA",
"region_name": "Pennsylvania",
"city": "State College",
"zip_code": "16802",
"time_zone": "America/New_York",
"latitude": 40,
"longitude": -77,
"metro_code": 574
}

그런 다음 속성 lat , long , city 및 state를 API가 데이터에 액세스하기 위해 반환하는 변수로 설정합니다. 이 경우 위도, 경도, 도시 및 현재 상태를 의미하는 region_name만 필요합니다.

세우다()

render() {
    // this function runs every time a properties() declared variable changes
    // this means you can make new variables and then bind them this way if you like
    const url = `https://maps.google.com/maps?q=${this.lat},${this.long}&t=&z=15&ie=UTF8&iwloc=&output=embed`;
    return html`<iframe title="Where you are" src="${url}"></iframe>
      <br />
      <link href="https://www.google.com/maps/@${this.lat},${this.long},14z" />
      <wikipedia-query search="${this.city}, ${this.state}"></wikipedia-query>
      <wikipedia-query search="${this.city}"></wikipedia-query>
      <wikipedia-query search="${this.state}"></wikipedia-query> `;
  }

이 메서드는 렌더링 작업을 수행하기 위해 업데이트할 때마다 호출됩니다. 이 메서드는 lit-HTML의 요소로 렌더링 가능한 값을 반환합니다. Iframe이 작동하도록 lat 및 long 속성을 전달합니다. 이러한 속성이 변경될 때마다 lit은 정보를 렌더링하고 업데이트합니다. 결과는 다음과 같습니다.

.

Wikipedia 태그 연결하기

wikipedia 태그가 작동하도록 하려면 먼저 다음을 수행해야 합니다.

Google 지도의 위치로 연결되는 iframe 아래에 있는 HTML 링크를 만듭니다.

lat 및 long 속성을 전달합니다.

다음 실행 npm install @lrnwebcomponents/wikipedia-query

사용하려면 파일 상단에 있는 태그를 사용해야 합니다 import import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js;'


다음으로 렌더링 기능에서 wikipedia 태그를 추가합니다. Wikipedia's API is documented here

검색 속성은 ${this.city} , ${this.state} 태그가 제대로 작동하는지 확인하기 위해 쉼표와 공백을 차례로 사용합니다.

위의 단계를 수행한 후 결과는 다음과 같아야 합니다.



귀하의 위치를 ​​기반으로 Wikipedia 태그는 귀하의 주 및 도시 정보를 표시합니다.

이제 API를 성공적으로 가져와 Wikipedia 태그를 연결했습니다. 잘 했어!

전체 프로젝트를 보려면click here.

자원

Wikipedia-query

GeoIP

Fetch API