Javascript의 배열 방법을 사용하여 API 데이터 처리

📣 이 글은 최초로 Use Javascript's Array Methods to Handle API Data에 나왔다The Bearer Blog.
조작 데이터는 모든 개발자의 핵심 기능이다.API 제어 환경에서는 애플리케이션 또는 UI에 필요한 형식과 직접 일치하지 않는 대량의 데이터를 수신할 수 있습니다.각 웹 서비스와 타사 API는 다릅니다.이것이 바로 데이터 형상을 정렬하고 규범화하며 여과하고 조작하는 능력이다.
본고에서 우리는 자바스크립트를 사용하여 데이터를 처리하는 흔한 방법을 연구할 것이다.다음은 모든 노드에서 코드를 사용해야 합니다.js 또는 브라우저.

API에서 데이터 읽어들이기
우리가 시작하기 전에, 너는 약간의 데이터가 필요하다.본고의 나머지 예시에 대해 GitHub의 v3 rest API 검색에서 되돌아오는 데이터를 사용할 것입니다.우리는 search/repositories 단점 조회와 검색어가 일치하는 저장소 (q 매개 변수, 이 예에서 bearer 를 사용할 것입니다.우리는 또한 매 페이지의 결과 수량을 10개로 제한할 것이며, 단지 한 페이지만 있을 것이다.이것은 우리의 예시를 더욱 쉽게 관리할 수 있게 한다.
먼저 Fetch를 사용하여 API에 연결하고 기본 오류 처리가 있는 함수에 봉인합니다.다음 예시에서 이 함수를 다시 사용할 수 있습니다.

const apiCall = () => fetch('https://api.github.com/search/repositories?q=bearer&per_page=10').then(res => {
  if (res.ok) {
    return res.json()
  }
  throw new Error(res)
})
.catch(console.err)

Node를 사용하는 경우js, node-fetch 패키지에Fetch 지원을 추가할 수 있습니다.npm install -S node-fetch를 사용하여 프로젝트에 설치합니다.그리고 프로젝트 파일의 맨 위에 그것을 요구합니다.

const fetch = require('node-fetch')

우리는 또한 async/await를 사용할 것이다.만약 플랫폼(예를 들어 Node.js의 일부 버전)이 최고급 비동기식/await를 지원하지 않는다면 코드를 비동기 함수에 봉인해야 합니다.예를 들면 다음과 같습니다.

async function example() {
 // Code here

    let results = await apiCall()

// More code

}

설정이 완료되면 응답 데이터를 처리하기 시작합니다.API 호출 결과는 공통 메타데이터를 포함하는 객체와 일련의 키가 items인 저장소를 제공합니다.이것은 여러 가지 기술을 사용하여 그룹을 교체하고 결과에 따라 조작할 수 있도록 합니다.우리 몇 가지 예시 용례를 봅시다.

결과 정렬
GitHub을 비롯한 많은 API에서 특정 기준에 따라 결과를 정렬할 수 있습니다.너는 이 일을 완전히 통제할 수 없다.예를 들어 GitHub의 저장소 검색은 별, 포크, 도움말이 필요한 질문, 항목 업데이트의 최근 시간만 정렬할 수 있습니다.다른 순서의 결과를 필요로 한다면, 자신의 정렬 함수를 만들어야 합니다.저장소에 있는 해결되지 않은 문제의 수에 따라 결과를 정렬하고 싶다고 가정하십시오.이것은 문제가 가장 적은 저장소가 먼저 표시되어야 하고 문제가 가장 많은 저장소가 마지막에 표시되어야 한다는 것을 의미한다.
Array.sort와 사용자 정의 정렬 함수를 사용하여 이 점을 실현할 수 있다.

// Sort by open issues
const sortByOpenIssues = repos => repos.sort((a,b) => a.open_issues_count - b.open_issues_count)

// Run the apiCall function and assign the result to results
let results = await apiCall()

// Call sort on the items key in results
console.log(sortByOpenIssues(results.items))

무슨 일이 일어났는지 알아보기 위해sort가 어떻게 일을 하는지 봅시다.이 메서드에는 다음과 같은 특정 반환 값이 필요합니다.

0보다 작은 값은 첫 번째 값이 두 번째 값보다 크고 순서대로 앞에 서야 한다는 것을 의미한다.

값이 0이면 두 값이 같다는 뜻이다.

0보다 큰 값은 두 번째 값이 첫 번째 값보다 크고 순서대로 앞에 서야 한다는 것을 의미한다.

이러한 조건을 처리하는 가장 간단한 방법은 첫 번째 값에서 두 번째 값을 빼는 것이다.우리 위의 코드에서 b.open_issues_count에서 a.open_issues_count를 빼다.만약 "a"의 문제 수가 비교적 많으면 결과는 0보다 클 것이다.만약 그것들이 같다면 0이다.마지막으로 만약 b가 더 크다면 결과는 마이너스일 것이다.sort 방법은 주위 항목의 모든 이동을 처리하고 새로운 그룹을 되돌려줍니다.위의 예시에서 두 개의 값을 비교하였으나, 상기 조건이 발생한 모든 계산을 사용하여 수조의 결과를 정렬할 수 있다.

결과 필터링
정렬은 데이터의 순서를 바꾸지만, 필터는 특정 기준에 따라 데이터 범위를 축소합니다.그것을 그릇에서 모든 특정 색깔의 사탕을 꺼낸다고 상상해 보세요.그룹에 자바스크립트 내장 filter 방법을 사용해서 이 문제를 처리할 수 있습니다.sort와 유사하게 필터 방법은 항목마다 교체되고 새 그룹으로 되돌아옵니다.필터 장면을 몇 개 보여 주십시오.
우선, 설명이 포함된 저장소만 표시하는 필터를 만들 것입니다.

// Filter only repos that have descriptions
const descriptionsOnly = (repos) => repos.filter((repo) => repo.description)

let results = await apiCall()
console.log(descriptionsOnly(results.items))

이 예에서는 API가 값repo.description을 반환했는지 여부를 나타내기 위해 null의 신뢰성을 반환합니다.순환 중인 현재 교체 true 가 되돌아오면, 이 교체 항목은 새 그룹으로 전송됩니다.
설명과 홈 URL을 모두 갖춘 저장소만 원한다면?당신은 앞의 예시를 수정하여 이 점을 실현할 수 있습니다.

// Filter only repos with URL and description
const homeAndDescription = repos => repos.filter(repo => repo.homepage && repo.description)

let results = await apiCall()
console.log(homeAndDescription(results.items))

Javascript 및 연산자(&&&)를 사용하여 설명과 URL이 모두 있는지 확인할 수 있습니다.만약 그렇다면, 전체 표현식은true를 되돌려주고, 그룹의 항목은 새 그룹에 추가됩니다.그 중 하나가false라면 전체 표현식은false이며, 교체는 새 그룹에 추가되지 않습니다.
그럼 좀 더 복잡한 건요?날짜 이후에 업데이트하려는 모든 저장소를 가정합니다.임계값을 설정하여 각 저장소의 updated_at 값과 비교할 수 있습니다.

// Set a threshold

let date_threshold = Date.parse('2020-08-01')

// Filter over results and compare the updated date with the cutoff date
const filterByDate = (repos, cutoff_date) => repos.filter(repo => Date.parse(repo.updated_at) > date_threshold)

let results = await apiCall()

console.log(filterByDate(results.items, date_threshold))

이전 예시와 같이 Filter에 전달된 함수에서 되돌아오는 값의 진실성은 이 항목을 새 그룹에 추가할지 여부를 결정합니다.

데이터의 형태 및 형식 변경
때때로 네가 받은 데이터는 네가 용례로 필요로 하는 것이 아니다.그것은 너무 많은 내용을 포함할 수도 있고, 형식이 틀릴 수도 있다.이 문제를 해결하는 방법의 하나는 데이터를 규범화하는 것이다.데이터 규범화는 데이터를 한 조의 표준에 부합하도록 구조화하는 과정이다.예를 들어, 서버에서 이러한 API 상호 작용이 발생하지만 클라이언트가 데이터의 하위 세트를 필요로 한다고 가정합니다.데이터를 클라이언트에 전달하기 전에 이를 재구성할 수 있다.

const normalizeData = repos => repos.map(repo => ({
    url: repo.html_url,
    name: repo.name,
    owner: repo.owner.login,
    description: repo.description,
    stars: repo.stargazers_count
})

let results = await apiCall()

console.log(normalizeData(results.items))

위의 코드에서 map 수조 방법을 사용하여 결과를 교체한다.그것은 되돌아오는 값으로 구성된 새로운 그룹을 되돌려줍니다.이런 상황에서 환매 협의에서 나온 데이터는 몇 개의 키/값만 포함하는 것으로 간소화되고 키의 이름도 이해하기 쉽다.
너는 심지어 이 시간을 이용하여 어떤 데이터도 수정할 수 있다.예를 들어 repo.stargazers_count 를 Number() 에 포장해서 문자열이 아닌 숫자가 항상 숫자인지 확인할 수 있습니다.

마무리
API에서 받은 데이터를 관리하는 것은 모든 API 통합의 핵심 부분입니다.각 API는 각기 다른 형식의 데이터를 반환합니다.예외적으로 GraphQL API는 모양을 보다 잘 제어하고 정렬 순서와 필터링 옵션도 제어할 수 있습니다.
데이터를 더 큰 데이터 처리 작업의 일부로 사용하든지, 응용 프로그램이 사용자에게 유용성을 높이는 데 사용하든지, 데이터가 응용 프로그램에 소화될 수 있도록 몇 가지 작업을 실행해야 합니다.
이러한 API 통합은 응용 프로그램의 불가결한 부분이지만, 실패할 때 어떤 일이 일어날까요?우리는 이전에 some of the actions 실패에서 protect your integrations 로 회복할 수 있다는 문장을 쓴 적이 있다.Bearer에서도 성능을 모니터링하고 문제를 알리며 애플리케이션에 의존하는 API의 문제를 자동으로 복구하는 완벽한 솔루션을 구축하고 있습니다.Learn more about Bearer,오늘 한번 해 봅시다.